![](/img/trans.png)
[英]JQuery Chosen set maximum number of options to select on change event
[英]How to disable the options in jquery chosen page load event?
嗨,我正在开发jQuery应用程序。 我有一个选择了jquery的dropdownlistbox。 默认情况下,无论何时我第一次加载页面时,我都希望隐藏下拉菜单中的某些选项。 例如,下面是我的下拉列表框,
<select class="limitedNumbSelect2" multiple="true">
<option value="1">Monday</option>
<option value="2">Tuesday</option>
<option value="3">Wednesday</option>
<option value="4">Thursday</option>
<option value="5">Friday</option>
<option value="6">Saturday</option>
<option value="6">Sunday</option>
</select>
这是我的Java脚本代码。
$(function () {
$(".chosen-select").chosen();
});
$(document).ready(function () {
jQuery('.limitedNumbSelect2 li:contains("Monday")').hide();
});
上面的代码无法正常工作。 它不会在页面加载时隐藏星期一。 我可以在这里得到一些帮助吗? 谢谢你们。
要解决此问题,可以在实例化select
上的select
库之前删除必需的option
元素,如下所示:
$(function() { $(".limitedNumbSelect2").find('option:contains("Monday")').remove().end().chosen(); });
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.jquery.min.js"></script> <select class="limitedNumbSelect2" multiple="true"> <option value="1">Monday</option> <option value="2">Tuesday</option> <option value="3">Wednesday</option> <option value="4">Thursday</option> <option value="5">Friday</option> <option value="6">Saturday</option> <option value="6">Sunday</option> </select>
另外,如果您别无选择, option
在调用chosen()
之后修改option
元素,则可以使用chosen:updated
事件手动更新显示的选项:
$(function() { var $chosen = $(".limitedNumbSelect2").chosen(); // your other code here... $chosen.find('option:contains("Monday")').remove(); $chosen.trigger("chosen:updated"); });
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.jquery.min.js"></script> <select class="limitedNumbSelect2" multiple="true"> <option value="1">Monday</option> <option value="2">Tuesday</option> <option value="3">Wednesday</option> <option value="4">Thursday</option> <option value="5">Friday</option> <option value="6">Saturday</option> <option value="6">Sunday</option> </select>
我认为更好的方法是通过按其值而不是按其文本隐藏选项。
因此,您可以编写:
$('.limitedNumbSelect2 option[value="1"]').hide();
在您的代码中,您提到了根本不存在的“ li”元素。
您的代码中有错别字:
jQuery('.limitedNumbSelect2 option:contains("Monday")').hide();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.