使用jQuery分離/附加選擇選項

Question

我正在嘗試建立具有多個下拉列表的表單，以允許訪問者對列表項進行排名。 樣本表格：

<form action="" name="rankem">
  <select name="rank1" id="rank1">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
    <option value="option4">Option 4</option>
    <option value="option5">Option 5</option>
  </select>
  <select name="rank2" id="rank2">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
    <option value="option4">Option 4</option>
    <option value="option5">Option 5</option>
  </select>
  <select name="rank3" id="rank3">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
    <option value="option4">Option 4</option>
    <option value="option5">Option 5</option>
  </select>
</form>

選擇了選項后，我想從每個下拉列表中刪除（分離）它們。

我實際列出的列表包含更多選項，以便人們可以在32個選項中排名前10位，因此，請想象上面的示例代碼，其中有10個下拉菜單，每個下拉菜單有32個選項。

如果有人從select＃rank1中選擇“ option2”，我希望從后續下拉列表中刪除option2，依此類推。 如果他們返回到select＃rank1，並將其選擇更改為“ option4”，則“ option2”將需要附加到所有下拉列表中。

我看過.detach（）和.append（），但是我真的不知道我在做什么。

$("option[value="+$(this).val()+"]").detach();

我嘗試了上面的方法，但是它只是從所有下拉菜單中刪除了該選項。 我是JS / jquery菜鳥，所以向正確方向提供的任何幫助或鏈接都值得贊賞。 謝謝！

Answer 1

嘗試使用以下這一行（用於分離元素）：

$("select:not(#"+$(this).parent().attr('id')+") option[value="+$(this).val()+"]").detach();

Answer 2

您是否考慮過啟用/禁用與附加和分離？

我沒有那么快的代碼（在這里用斷臂工作），但是一般的算法是這樣的：

$(function() {
    // Respond to any value change.
    $('select').change(function() {
        var val = $(this).val();

        // Enable/disable depending on the selection.
        // Removed the each loop after seeing You's answer (+1). He has a better solution.
        $('select:not(#' + $(this).parent().id + ') option[value=' + val + ']').removeAttr('disabled');
        $('select(#' + $(this).parent().id + ') option[value=' + val + ']').attr('disabled', 'disabled');
    });
});

這未經測試，我仍在學習jQuery（因此我會反饋）。

Answer 3

這會將選項從每個選擇中分離出來，每個選擇的等級號都大於當前選擇，並將其放入一個javascript對象，其中鍵是父選擇的ID。 每次更改選擇時，只會影響其后續選擇，而不影響鏈中較高的選擇。 因此，如果您從等級2中選擇，它將與等級3分離，但不會與等級1分離。 再次閱讀您的問題，我不確定這是否是您要尋找的功能，但是無論如何都可以。

function rankIndex(id){
  return id.substr(4);
}

$(document).ready(function(){

  var removed = {};
  $('select').each(function(){
    // define each select's bin for removed elements as an object
    removed[$(this).attr('id')] = {};
  });

  $('select').change(function(){

    var $this = $(this),
        $thisId = $this.attr('id'),
        $thisRankIndex = rankIndex($thisId);

      // add each element back to selects further in the chain
    $.each(removed[$thisId], function(selectId, option){
      $('#'+selectId).append(option);
    });

    // filter the selects that are further in the chain 
    // and detach the options into the removed bin
    $('select').filter(function(i){
      return rankIndex($(this).attr('id')) > $thisRankIndex;
    }).find('option[value='+$this.val()+']').each(function(){
      removed[$thisId][$(this).closest('select').attr('id')] = $(this).detach();
    });

  });

});

為了進一步了解我所做的工作，需要閱讀一些關鍵的東西是javascript對象和一些jQuery函數： filter() ， each() （以及jQuery.each() ）和find() 。 如果可以的話，任何人都可以隨意重構它，因為它有點冗長。 希望這可以幫助！

Answer 4

這對我有用，但是我不知道如何使用下拉菜單重新連接。

$("#name1").children("optgroup[label='Test:']").removeAttr('disabled').siblings().detach("optgroup");