logo标签列表

如何在jQuery Chosen下拉选择框中隐藏或删除选项

jqueryjquery-chosen
12

我希望能够隐藏使用Chosen插件创建的下拉列表中的某些元素。

我已经尝试将其删除：

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

并仅将其隐藏：

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

但两种方法都不起作用。

请查看颜色下拉框：http://www.carolineelisa.com/test/wordpress/product/machine/

任何帮助都将不胜感激 :)

5个回答
6
在原始的选择框中，您需要隐藏选项。例如：
$('select.chosen-select options:contains("Swatch 1")');

然后通过以下步骤更新所选选项：

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

如果页面上有多个下拉选择框，则最好使用更具体的id或class而不是在元素中使用$('select.chosen-select')。因此，您的代码应该变成：
$('#swatch_select options:contains("Swatch 1")');
$('#swatch_select').trigger("chosen:updated");
这根本不起作用，因为Chosen不支持选项可见性。而“options”不是一个有效的标签选择器... - Cerin
1
隐藏选项并更新...
$('#button').click(function(){
        $('select#theIDselect > option[value="Swatch 1"]').hide();
        $('#theIDselect').trigger("chosen:updated");
    });
1

kamijean 的代码小修改： 

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

请不要选择chosen-select而选择chosen-result，不要选择options而是选择option。
如果需要根据值选择而非标题，请使用以下代码。
 $('select.chosen-result option[value=830]').hide();
 $('select.chosen-result').trigger("chosen:updated");
1
这是一个 jQuery 代码片段，用于取消选择并更新被指定为多选的 chosen ddl。ddlID 是所选 ddl 的 ID，ddlValue 是选项的 value 属性。
$("#ddlID option[value='" + ddlValue + "']").prop('selected', false);
$("#ddlID").trigger("chosen:updated");
1
你可以使用值或类名来隐藏。在这里查看工作代码。
<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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接