Starting codes , adding , deleting and get option object

[nemanjamil]

I just want to share my solution when i you dualListBox

<select id="selectList" multiple="multiple" name="duallistbox_demo1[]"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 10</option> </select> <button type="submit" class="btn btn-light" value="generate">Generate</button>

This is my start var $duallist = 'select[name="duallistbox_demo1[]"]'; var demo1 = $($duallist).bootstrapDualListbox({ infoText: "" });

$("#selectList").on("change", function () { firstelement = demo1.bootstrapDualListbox()[0].value; // get the FirstElement in Selected Box allelements = $(this).val(); $('#selectList option[value="'+last_element+'"]').prop('selected',false); demo1.bootstrapDualListbox('refresh', true); });

Task 1 I want to remove one element from selectedBox on click on any other option in nonselected box $('#selectList option[value="'1"]').prop('selected',false); demo1.bootstrapDualListbox('refresh', true);

Question 1 : Is there better solution to remove element from selected elements

Task 2 Adding element to selected list $('#selectList option[value="1"]').attr('selected',true); demo1.bootstrapDualListbox('refresh', true);

Question 2 : Is there better solution to add element to selected elements

Task 3 On click on option in nonselected box $("#selectList").on("change.... how to get object of clicked option