How to hide or remove options from jQuery Chosen s

I would like to hide certain elements from a dropdown that is created using the Chosen plugin.

I have tried removing it:

$( 'option:contains("Swatch 1")').remove().trigger("chosen:updated");

and just hiding it:

$( '.chosen-results li:contains("Swatch 1")').css('display,'none');

But neither works.

See Colours dropdown: http://www.carolineelisa.com/test/wordpress/product/machine/

Any help appreciated :)

标签： jquery jquery-chosen

5条回答

该账号已被封号

2楼-- · 2020-03-12 03:38

In the original select you need to hide the option. For example:

$('select.chosen-select options:contains("Swatch 1")');

Then update the chosen options with:

$('select.chosen-select').trigger("chosen:updated");

If you have more than one chosen drop down on the page then it probably would be better to use a more specific id or class on that element in the place of $('select.chosen-select'). So your code would become:

$('#swatch_select options:contains("Swatch 1")');
$('#swatch_select').trigger("chosen:updated");

0人赞添加讨论(0) 举报

看我几分像从前

3楼-- · 2020-03-12 03:39

You can hide with value or with class name. Check working code here.

<select id="dd_option" data-placeholder="Select one..." class="chzn-select" style="width:350px;" tabindex="2">
    <option value="all" selected="selected"> All </option>
    <option  value="mls" class="list_srch"> #MLS Number </option>
    <option  value="zip" class="list_srch"> Zip/Postal </option>
    <option value="title"> Listing Title </option>
    </select>
<button type="button" id="btn_hide_val">Hide with value</button>
<button type="button" id="btn_hide_class">Hide with class</button>
<button type="button" id="btn_unhide">Unhide</button>
<script>

$(".chzn-select").chosen();

$('#btn_hide_val').click(function() {

    // Just hide option #MLS Number,  Zip/Postal
    $("#dd_option option[value='mls']").hide();
    $("#dd_option option[value='zip']").hide();
    $("#dd_option").trigger("chosen:updated");
        
});
$('#btn_hide_class').click(function() {

    // Just hide option  #MLS Number,  Zip/Postal
    $("#dd_option option[class='list_srch']").hide();

    $("#dd_option").trigger("chosen:updated");
        
});
  
$('#btn_unhide').click(function() {

    // Just hide option 4
    $("#dd_option option[class='list_srch']").show();
        
    $("#dd_option").trigger("chosen:updated");
        
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<html lang="en"> 
<head>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.css" />
</head>
<body>
  <form>
  <div id="container">
    <h3>Show/Hide options with value and class</h3>
    <select id="dd_option" data-placeholder="Select one..." class="chzn-select" style="width:350px;" tabindex="2">
        <option value="all" selected="selected"> All </option>
        <option  value="mls" class="list_srch"> #MLS Number </option>
        <option  value="zip" class="list_srch"> Zip/Postal </option>
        <option value="title"> Listing Title </option>
        </select>
        <br /><br />

    <button type="button" id="btn_hide_val">Hide with value</button>
    <button type="button" id="btn_hide_class">Hide with class</button>
    <button type="button" id="btn_unhide">Unhide</button>

  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.js" type="text/javascript"></script>

0人赞添加讨论(0) 举报

家丑人穷心不美

4楼-- · 2020-03-12 03:42

Small edit of kamijean's code:

 $('select.chosen-result option:contains("Swatch 1")').hide();
 $('select.chosen-result').trigger("chosen:updated");

so not chosen-select but chosen-result and not options but option

for selecting by values and not title use

 $('select.chosen-result option[value=830]').hide();
 $('select.chosen-result').trigger("chosen:updated");

0人赞添加讨论(0) 举报

姐就是有狂的资本

5楼-- · 2020-03-12 03:44

Here's a jquery snipped to deselect and update a chosen ddl that is designated as multiple. ddlID is the ID of the chosen ddl and ddlValue is the value property of the option.

$("#ddlID option[value='" + ddlValue + "']").prop('selected', false);
$("#ddlID").trigger("chosen:updated");

0人赞添加讨论(0) 举报

等我变得足够好

6楼-- · 2020-03-12 03:49

hide the option and update....

$('#button').click(function(){
        $('select#theIDselect > option[value="Swatch 1"]').hide();
        $('#theIDselect').trigger("chosen:updated");
    });

0人赞添加讨论(0) 举报

How to hide or remove options from jQuery Chosen s

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间