JSFiddle - React, Tailwind, and code Playground
HTML
<input type="button" id="selectItem" value="Select Item in List" />
<select id="testUpdate" name="testUpdateName" multiple="multiple" size="5">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
JavaScript
testUpdate = {
currentSelection: undefined,
getCurrentSelectionValue: function () {
if (this.currentSelection === undefined || this.currentSelection === 5) {
this.currentSelection = 1;
} else {
this.currentSelection++;
}
return this.currentSelection;
},
clearAllSelections: function () {
$("#testUpdate option:selected").each(function () {
$(this).removeAttr('selected');
});
},
runTest: function () {
this.clearAllSelections();
$("#testUpdate option[value='" + this.getCurrentSelectionValue() + "']").attr('selected', 'selected');
},
setupEvents: function () {
$("#selectItem").click(function () {
testUpdate.runTest();
});
},
init: function () {
this.setupEvents();
}
}
$().ready(function(){testUpdate.init();});