避免使用jquery重复选项

Question

我有一个包含5行的表格。每行第一列是选择标记。

 <table>
<tr>
    <th>fruits</th>
    <th>count</th>
   </tr>
<tr>
    <td><select>
        <option>--select--</option>
        <option value="1">apple</option>
         <option value="2">orange</option>
         <option value="3">banana</option>
         <option value="4">grapes</option>
         <option value="5">strawberry</option>
        </select>
        </td>
    <td><input type="text"/></td>
</tr>
    <tr>
    <td><select>
        <option>--select--</option>
        <option value="1">apple</option>
         <option value="2">orange</option>
         <option value="3">banana</option>
         <option value="4">grapes</option>
         <option value="5">strawberry</option>
        </select>
        </td>
    <td><input type="text"/></td>
</tr>
    <tr>
    <td><select>
        <option>--select--</option>
        <option value="1">apple</option>
         <option value="2">orange</option>
         <option value="3">banana</option>
         <option value="4">grapes</option>
         <option value="5">strawberry</option>
        </select>
        </td>
    <td><input type="text"/></td>
</tr>
    <tr>
    <td><select>
        <option>--select--</option>
        <option value="1">apple</option>
         <option value="2">orange</option>
         <option value="3">banana</option>
         <option value="4">grapes</option>
         <option value="5">strawberry</option>
        </select>
        </td>
    <td><input type="text"/></td>
</tr>
    <tr>
    <td><select>
        <option>--select--</option>
        <option value="1">apple</option>
         <option value="2">orange</option>
         <option value="3">banana</option>
         <option value="4">grapes</option>
         <option value="5">strawberry</option>
        </select>
        </td>
    <td><input type="text"/></td>
</tr>
  </table>

现在我想阻止多次选择相同的选项，提醒有关复制的信息，并重新调整为--select--。 怎么用jquery写的？

Answer 1

您可以使用：

$('table select').change(function() {
    if ($('option[value=' + $(this).val() + ']:selected').length > 1) {
        alert('option is already selected');
        $(this).val($(this).find("option:first").val());   
    }
});

<强> Working Demo

Answer 2

尝试 -

func btnDisclosureAction(sender: UIButton) {
    println(indexselected)
}

Answer 3

我认为更好的方法可以如下 - （仍然可以改进以保持项目的顺序）

var $selects = $('select');

$selects.on('change', function() {
  var value = this.value,
    $this = $(this),
    $prev = $this.data('prev'),
    $selected = $this.find(':selected');

  if ($prev) {
    $this.removeData('prev');
    $selects.not(this).append(function() {
      return $prev.clone();
    })
  }

  if (value) {
    $selects.not(this).find('option[value="' + value + '"]').remove();
    $this.data('prev', $selected);
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <th>fruits</th>
    <th>count</th>
  </tr>
  <tr>
    <td>
      <select>
        <option>--select--</option>
        <option value="1">apple</option>
        <option value="2">orange</option>
        <option value="3">banana</option>
        <option value="4">grapes</option>
        <option value="5">strawberry</option>
      </select>
    </td>
    <td>
      <input type="text" />
    </td>
  </tr>
  <tr>
    <td>
      <select>
        <option>--select--</option>
        <option value="1">apple</option>
        <option value="2">orange</option>
        <option value="3">banana</option>
        <option value="4">grapes</option>
        <option value="5">strawberry</option>
      </select>
    </td>
    <td>
      <input type="text" />
    </td>
  </tr>
  <tr>
    <td>
      <select>
        <option>--select--</option>
        <option value="1">apple</option>
        <option value="2">orange</option>
        <option value="3">banana</option>
        <option value="4">grapes</option>
        <option value="5">strawberry</option>
      </select>
    </td>
    <td>
      <input type="text" />
    </td>
  </tr>
  <tr>
    <td>
      <select>
        <option>--select--</option>
        <option value="1">apple</option>
        <option value="2">orange</option>
        <option value="3">banana</option>
        <option value="4">grapes</option>
        <option value="5">strawberry</option>
      </select>
    </td>
    <td>
      <input type="text" />
    </td>
  </tr>
  <tr>
    <td>
      <select>
        <option>--select--</option>
        <option value="1">apple</option>
        <option value="2">orange</option>
        <option value="3">banana</option>
        <option value="4">grapes</option>
        <option value="5">strawberry</option>
      </select>
    </td>
    <td>
      <input type="text" />
    </td>
  </tr>
</table>