簡體   English   中英

JQuery選擇下拉列表中的所有值,復選框不起作用

[英]JQuery select all values in a dropdown with checkbox not working

我使用 Flask 作為我的應用程序的框架。 我有兩個帶有復選框的下拉菜單,其 id 為“nodes-select”,它將填充從數據庫中獲取的值。 第二個列表具有靜態名稱。 在頁面加載時,我必須選擇兩個列表中的所有復選框。 第一個下拉(節點選擇)工作正常。 但是第二個下拉菜單沒有選擇任何復選框。 我試過這段代碼。 糾正我哪里錯了?

HTML

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

Javascript

<script type="text/javascript">
$('#nodes-select').change(function(){
    console.log("Atleast nodes...");
    if($("#nodes-select option[value='-1']").is(':selected'))
    {
        console.log("node...");
        $('#nodes-select option').prop('selected', true);
        $("#nodes-select option[value='-1']").prop('selected', false);
    }
    $('#nodes-select').multiselect('refresh');
});

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

function onLoading()
{
    alert("Page 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: i,
                text : tmp[i]
            }));
        }
        $('#nodes-select').multiselect('rebuild');
        $('#nodes-select option').prop('selected', true);
        $("#nodes-select option[value='-1']").prop('selected', false);
        $('#nodes-select').multiselect('refresh');

        $('#filter-select').append($('<option>', {
            value: -1,
            text : "All"
        })); 
        console.log("&&") ;                       
        var temp = ["MAC","SUBLBL","VRF","IFHNDL","COMP_ID","V4_ADDR","V6_ADDR"];
        for(var i =0;i<temp.length;i++)
        {
            console.log(temp[i]);
            $('#filter-select').append($('<option>', {
                value: i,
                text : temp[i]
            }));
        }
        $('#filter-select').multiselect('rebuild');
        $('#filter-select').prop('selected', true);
        $("#filter-select option[value='-1']").prop('selected', false);
        $('#filter-select').multiselect('refresh');
    });
}            

</script>

您似乎忘記查詢#filter-select 的實際選項。

更改此行:

$('#filter-select').prop('selected', true);

至:

$('#filter-select option').prop('selected', true);

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM