无法从选定的选定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 。