How to re-select items in listbox?
Question
I have a web page that has two listbox. I am having a problem with my jQuery/JavaScript. When the user selects an item in the left listbox, it should select three items in the right listbox. It only works the first time unless I refresh the page. I know the code is being executed because I can step through it. This seems to be a simple task so I must be missing something. I created an online sample of the problem on www.tutorialspoint.com which shows the problem. Listbox sample online - press the Preview button. Thank you for your help!
<!DOCTYPE html>
<html>
<head>
<title>Re-select Items in Listbox</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#meters').change(function () {
$('#baselines option').prop('selected', false); // Clear selected baselines
var data = [2, 3, 4];
var len = $('#baselines option').length;
for (var i = 1; i <= len; i++) {
$("#baselines option[value=" + i + "]").attr("selected", (data.indexOf(i) !== -1) ? true : false);
}
});
});
</script>
</head>
<body>
<p id="myid">Is is a test of selecting items in listbox</p>
<div>
<select class="form-control" id="meters" name="SelectedMeters" style="width: 200px;">
<option value="1">12345678</option>
<option value="2">1234567890</option>
</select>
<select class="form-control" id="baselines" multiple="True" name="SelectedBaselines" size="10" style="width: 200px;">
<option value="1">MeterBaseline1</option>
<option value="2">MeterBaseline2</option>
<option value="3">MeterBaseline3</option>
<option value="4">MeterBaseline4</option>
<option value="5">MeterBaseline5</option>
<option value="6">MeterBaseline6</option>
<option value="7">PJM_MovingAvg</option>
</select>
</div>
</body>
</html>
2 answers
solution1
2 ACCPTED 2019-04-04 20:57:36
use removeAttr for unselect the options and prop to select it
<!DOCTYPE html> <html> <head> <title>Try jQuery Online</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> function getRndInteger(min, max) { return Math.floor(Math.random() * (max - min + 1) ) + min; } $(document).ready(function() { $("em").addClass("selected"); $("#myid").addClass("highlight"); $('#meters').change(function () { $('#baselines option').removeAttr('selected'); var data = [getRndInteger(1, 2),getRndInteger(3, 4),getRndInteger(5, 7)]; console.debug(data); var len = $('#baselines option').length; for (var i = 1; i <= len; i++) { $("#baselines option[value=" + i + "]").prop("selected", (data.indexOf(i) !== -1) ? true : false); } }); }); </script> <style> .selected { color:red; } .highlight { background:yellow; } </style> </head> <body> <p id="myid">Is is a test of selecting items in listbox</p> <div> <select class="form-control" id="meters" name="SelectedMeters" style="width: 200px;"> <option value="1">12345678</option> <option value="2">1234567890</option> </select> <select class="form-control" id="baselines" multiple="True" name="SelectedBaselines" size="10" style="width: 200px;"> <option value="1">MeterBaseline1</option> <option value="2">MeterBaseline2</option> <option value="3">MeterBaseline3</option> <option value="4">MeterBaseline4</option> <option value="5">MeterBaseline5</option> <option value="6">MeterBaseline6</option> <option value="7">PJM_MovingAvg</option> </select> </div> </body> </html>
solution2
1 2019-04-04 20:41:01
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.