Unable to append and update option from select selected jquery

Question

I'm trying to append one option selected to another select. The issue i'm having is that i'm able to append one of the option as desire however if i pick a different option within the same select, the option gets appended as well which not what i want. I want to update the appended options if a different one is selected. So far this is what i have. Select is dynamic ("next_exp") is the id of each select created.

 $('#myselect'+next_exp).on( 'change', function() {
    var sel = $('[id^="select-reflecting-option-selected"]'), opt = $( '<option/>' );
   if (sel.find('option').text().indexOf(this.id) > 0) {
        $('option[value=' + this.id + ']').remove();
          $("select[select-reflecting-option-selected] option:selected").remove();
    } else {
       sel.append( $("<option />").text(this.value).val( this.value));
    }

});

Answer 1

I think you made something simple looking complex.

All you have to do is find the .selectedIndex and use it to "move" the option the the other select using .eq() and .append() .

You don't have to remove it and create a new... When you append an exiting element somewhere else, that is a "move"... Not a .clone() .

 $('#myselect').on( 'change', function() { var selectedIndex = $(this)[0].selectedIndex if( selectedIndex > 0){ $("#myotherselect").append( $(this).find("option").eq(selectedIndex) ); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="myselect"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <select id="myotherselect"> <option>A</option> <option>B</option> <option>C</option> <option>D</option> <option>E</option> </select> 

---

EDIT

I didn't get that aspect of checking if the option is already in the second select...

This need an additional verification, obviously.
Look the comments in code.

 $('#myselect').on( 'change', function() { // Selected index from 1st select element. var selectedIndex = $(this)[0].selectedIndex; // The text of the selected option (will be used to compare). var selectedText = $(this).find("option").eq(selectedIndex).text(); // A collection of all the option elements from the other select. var otherSelectOptions = $("#myotherselect").find("option"); // An empty array to store the text of all options in the other select. var otherSelectOptionTexts = []; // Loop to fill the array above. for(i=0;i<otherSelectOptions.length;i++){ otherSelectOptionTexts.push(otherSelectOptions.eq(i).text()); } // Some console logs to know what happens here... console.log(JSON.stringify(otherSelectOptionTexts)); console.log(selectedText); // If selected option is not the first. if( selectedIndex > 0){ // If the selected option's text isn't found in the array filled previously. if(otherSelectOptionTexts.indexOf(selectedText) == -1){ console.log("Option moved to the other select."); // Move the option in the other select $("#myotherselect").append( $(this).find("option").eq(selectedIndex) ); // If the text is found. }else{ console.log("Option was already in the other select... Just removed."); // Just remove the option $(this).find("option").eq(selectedIndex).remove(); } } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select id="myselect"> <option>--Select a number</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <select id="myotherselect"> <option>--Select a letter/number</option> <option>A</option> <option>B</option> <option>3</option> <option>C</option> <option>D</option> <option>E</option> </select> 

The number 3 from the first select will not be "moved"... Just removed, because there is already an option 3 in the second select.