gpt4 book ai didi

javascript - jquery .prop() 不适用于带有复选框的下拉菜单

转载 作者:行者123 更新时间:2023-12-02 15:32:59 26 4
gpt4 key购买 nike

我正在做一个小项目,以Mysql为后端,Flask为框架。当我加载页面时,下拉列表应该填充数据库中的值(我的代码中的 onLoading() )。当我从带有复选框的下拉列表中选择“全部”选项时(我可以选择多个),列表中的所有选项应该被选中。当我取消选中“全部”时,所有选项都应该被取消选中。我尝试了这段代码。但不知何故它不起作用。当我选择“全部”时,console.log 正确打印“外部”和“内部”但其他选项没有得到检查。我可以知道我的代码中的缺陷在哪里吗?

HTML

<body onload=onLoading()>
<select id="nodes-select" multiple="multiple">

</select>
</body>

Javascript

<script type="text/javascript">

$('#nodes-select').change(function(){
console.log("Outside");
if($("#nodes-select option[value='-1']").is(':selected'))
{
console.log("Inside");
$('#nodes-select option').prop('selected', true);
$("#nodes-select option[value='-1']").prop('selected', false);
}

});


function onLoading()
{
alert("Loaded");

$.get("/nodes",function(data,status)
{
var tmp = data.output;
console.log(tmp);
$('#nodes-select').append($('<option>', {
value: -1,
text : "All"
}));

for(var i =0;i<tmp.length;i++)
{
console.log(tmp[i]);
$('#nodes-select').append($('<option>', {
value: tmp[i],
text : tmp[i]
}));
}
$('#nodes-select').multiselect('rebuild');


});


}

</script>

最佳答案

这是因为您正在使用多选插件。

实际的select 正在被漂亮的选择所取代。 (并且它们不共享属性的双向绑定(bind))。

因此,您需要在对 select 元素进行更改后调用 refresh 方法。

$('#nodes-select').change(function() {
console.log("Outside");
if ($("#nodes-select option[value='-1']").is(':selected')) {
console.log("Inside");
$('#nodes-select option').prop('selected', true);
$("#nodes-select option[value='-1']").prop('selected', false);
}
// add the following line to refresh the multiselect element.
$('#nodes-select').multiselect('refresh');
});

关于javascript - jquery .prop() 不适用于带有复选框的下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33154651/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com