如何禁用jquery选择的页面加载事件中的选项?

时间:2017-01-20 12:16:43

标签: javascript jquery jquery-chosen

您好我正在开发jquery应用程序。我有一个dropdownlistbox选择了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();
    });

上述代码无法按预期工作。它不会在页面加载时隐藏星期一。我可以在这里得到一些帮助吗?谢谢大家。

3 个答案:

答案 0 :(得分:3)

要解决此问题,您可以在{/ 1}}上实例化选择的库之前删除所需的option元素,如下所示:

select
$(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()事件手动更新显示的内容选项:

chosen:updated
$(function() {
    var $chosen = $(".limitedNumbSelect2").chosen();
  
    // your other code here...
  
    $chosen.find('option:contains("Monday")').remove();
    $chosen.trigger("chosen:updated"); 
});

答案 1 :(得分:1)

我认为更好的方法是通过价值而不是文本隐藏选项。

所以,你可以写:

$('.limitedNumbSelect2 option[value="1"]').hide();

在你的代码中你提到了根本不存在的'li'元素......

答案 2 :(得分:0)

您的代码中有拼写错误:

jQuery('.limitedNumbSelect2 option:contains("Monday")').hide();