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

Question

您好，我正在开发 jquery 应用程序。我有一个选择了 jquery 的下拉列表框。每当我第一次默认加载我的页面时，我想隐藏下拉列表中的一些选项。例如，下面是我的下拉列表框，

<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();
    });

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

Answer 1

要解决此问题，您可以在 在 select 上实例化 Chosen 库之前删除所需的 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>

或者，如果您别无选择，只能在 调用 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>