如何禁用 jquery 所选页面加载事件中的选项?
How to disable the options in jquery chosen page load event?
您好,我正在开发 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();
});
以上代码没有按预期工作。它不会在页面加载时隐藏星期一。我可以在这里得到一些帮助吗?谢谢大家
要解决此问题,您可以在 实例化 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>
您的代码有错别字:
jQuery('.limitedNumbSelect2 option:contains("Monday")').hide();
我认为更好的方法是通过值而不是文本隐藏选项。
所以,你可以这样写:
$('.limitedNumbSelect2 option[value="1"]').hide();
在您的代码中,您提到 'li' 根本不存在的元素...
您好,我正在开发 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();
});
以上代码没有按预期工作。它不会在页面加载时隐藏星期一。我可以在这里得到一些帮助吗?谢谢大家
要解决此问题,您可以在 实例化 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>
您的代码有错别字:
jQuery('.limitedNumbSelect2 option:contains("Monday")').hide();
我认为更好的方法是通过值而不是文本隐藏选项。
所以,你可以这样写:
$('.limitedNumbSelect2 option[value="1"]').hide();
在您的代码中,您提到 'li' 根本不存在的元素...