Issue
I am using Flask as the framework for my application. I have two drop downs with checkboxes which has id "nodes-select" and it will be populated with values that are fetched from the database. Second list has static names. On page load, I have to select all the checkboxes in both the lists. First drop down(nodes-select) is working fine. But second drop down is not selecting any checkbox. I tried this code. Correct me where I am wrong?
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>
Solution
It looks like you are forgetting to query the actual options of #filter-select.
Change this line:
$('#filter-select').prop('selected', true);
to:
$('#filter-select option').prop('selected', true);
Answered By - pizzarob
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.