無法從選定的選定jQuery添加和更新選項

Question

我正在嘗試將一個選項附加到另一個選擇中。 我遇到的問題是，我能夠按需追加選項之一，但是如果我在同一選擇中選擇了不同的選項，那么該選項也會被追加，這不是我想要的。 如果選擇了其他選項，我想更新附加選項。 到目前為止，這就是我所擁有的。 選擇是動態的（“ next_exp”）是創建的每個選擇的ID。

 $('#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

我認為您使事情變得簡單而復雜。

您所需要做的就是找到.selectedIndex並使用它來“移動”選項，然后使用.eq()和.append()進行另一個select 。

您不必刪除它並創建一個新的...當您將退出元素附加到其他位置時，這就是“移動” ...而不是.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> 

---

編輯

我沒有檢查該選項是否已經在第二選擇中...

顯然，這需要額外的驗證。
在代碼中查看注釋。

 $('#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> 

第一個選擇中的數字3不會被“移動” ...只是刪除，因為第二個選擇中已經有一個選項3 。