I have 2 select boxes where I can choose options from one box and transfer them to the other. Upon clicking save, the selected values should be stored in an array and passed to the home controller. Although I receive the correct data in an alert message, I encounter an error in the firebug console that I am struggling to resolve. Your assistance in this matter would be greatly appreciated. Below is the error along with the relevant code snippet.
for (var i = 0; i <= PairedSelectBox.options.length; i++) {
selectedClientChips.push(PairedSelectBox.options[i].value);
alert("selectedClientChips == " + selectedClientChips);
}
The error displayed in the console is:
TypeError: PairedSelectBox.options[i] is undefined
selectedClientChips.push(PairedSelectBox.options[i].value);
Here is the HTML code:
<table>
<tr>
<td>
<label style="font-size: medium;">Client Chip details</label>
</td>
</tr>
<tr>
<td>
<label>Search</label>
<input type="text" id="searchId">
<input type="button" value="Go" onclick="getClientChipDetails();"></td>
</tr>
<tr>
<td>
<label style="font-size: small;">Client-Chip data</label>
</td>
<td></td>
<td>
<label style="font-size: small">Selected Client-Chip data</label>
</td>
</tr>
<tr>
<td>
<select id="MasterSelectBox" name="MasterSelectBox" size="10" multiple="multiple"></select>
</td>
<td>
<button id="btnAdd">> </button>
<br>
<button id="btnRemove">< </button>
</td>
<td>
<select id="PairedSelectBox" name="PairedSelectBox" size="10" multiple="multiple">
</select>
</td>
</tr>
</table>
This is the corresponding script:
$(document).ready(function () {
$('#MasterSelectBox').pairMaster();
$('#btnAdd').click(function () {
$('#MasterSelectBox').addSelected('#PairedSelectBox');
});
$('#btnRemove').click(function () {
$('#PairedSelectBox').removeSelected('#MasterSelectBox');
});
});