如何从 jQuery Chosen 选择下拉菜单中隐藏或删除选项
Posted
技术标签:
【中文标题】如何从 jQuery Chosen 选择下拉菜单中隐藏或删除选项【英文标题】：How to hide or remove options from jQuery Chosen select dropdown 【发布时间】：2014-10-20 04:41:26 【问题描述】：我想从使用 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/
任何帮助表示赞赏:)
【问题讨论】：
【参考方案1】：在原始选择中，您需要隐藏该选项。例如：
$('select.chosen-select options:contains("Swatch 1")');
然后更新选择的选项：
$('select.chosen-select').trigger("chosen:updated");
如果您在页面上选择了多个下拉菜单，那么在该元素上使用更具体的 id 或类来代替 $('select.chosen-select') 可能会更好。所以你的代码会变成：
$('#swatch_select options:contains("Swatch 1")');
$('#swatch_select').trigger("chosen:updated");
【讨论】：
这根本不起作用，因为 Chosen 不支持选项可见性。并且“选项”不是有效的标签选择器...【参考方案2】：这里有一个 jquery 被截断到 deselect 并更新一个选定的 ddl，该 ddl 被指定为多个。 ddlID 是所选 ddl 的 ID，ddlValue 是选项的 value 属性。
$("#ddlID option[value='" + ddlValue + "']").prop('selected', false);
$("#ddlID").trigger("chosen:updated");
【讨论】：
【参考方案3】：隐藏选项并更新....
$('#button').click(function()
$('select#theIDselect > option[value="Swatch 1"]').hide();
$('#theIDselect').trigger("chosen:updated");
);
【讨论】：
【参考方案4】：kamijean 代码的小编辑：
$('select.chosen-result option:contains("Swatch 1")').hide();
$('select.chosen-result').trigger("chosen:updated");
所以不是选择选择而是选择结果而不是选项而是选项
用于按值选择而不是使用标题
$('select.chosen-result option[value=830]').hide();
$('select.chosen-result').trigger("chosen:updated");
【讨论】：
【参考方案5】：您可以使用 value 或 class 名称隐藏。在此处检查工作代码。
<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>【讨论】：
以上是关于如何从 jQuery Chosen 选择下拉菜单中隐藏或删除选项的主要内容，如果未能解决你的问题，请参考以下文章