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并将其用于＆＃34;移动＆＃34;另一个select选项使用.eq()和.append()。

你不必删除它并创建一个新的...当你在其他地方附加一个现有元素时，那就是＆＃34;移动＆＃34; ...不是.clone()

＆＃13;

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

＆＃13;

<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>

＆＃13;

<小时/> 的修改

我没有检查选项是否已经在第二个选择中...

显然，这需要额外的验证查看代码中的注释。

＆＃13;

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

＆＃13;

<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>

＆＃13;

第一个选择中的数字3将不会被移动＆＃34; ...刚删除，因为第二个选择中已有选项3。

无法从选择的选定jquery中追加和更新选项

1 个答案: