多个select，当某个选项被selected时，unselect其他选项

Question

我的 HTML 中有多个 select 列表。如果值 296 得到 selected，所有其他选项必须得到 unselected。

这是我正在使用的代码，因此当我想 select 多个选项时我不必使用 CTRL：

$("#select").mousedown(function(e) {
  e.preventDefault();

  var select = this;
  var scroll = select.scrollTop;

  if (select.value == 296) {
    //unselect all the other options
  }

  e.target.selected = !e.target.selected;

  setTimeout(function() {
    select.scrollTop = scroll;
  }, 0);

  $(select).focus();
}).mousemove(function(e) {
  e.preventDefault()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select" name="adrestype_id" class="form-control" required="required" multiple="multiple">                
    <option value="296">Primairadres </option>                
    <option value="297">Bezoekadres </option>                
    <option value="298">Factuuradres </option>                
    <option value="299">Postadres </option>
</select>

当值 296 为 selected

时，我似乎无法弄清楚如何取消select 所有其他选项

Answer 1

以下似乎实现了您上面所说的。如果已经选择了 296，它也会阻止您选择选项。

const unselect = '296'

$('#select').change(function() {
  const $el = $(this)
  console.log($el.val())
  if ($el.val().indexOf(unselect) !== -1) {
    $el.children('option').each(function() {
      $opt = $(this)
      if ($opt.val() !== unselect) {
        $opt.prop('selected', false)
      }
    });
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select" name="adrestype_id" class="form-control" required="required" multiple="multiple">                
            <option value="296">Primairadres </option>                
            <option value="297">Bezoekadres </option>                
            <option value="298">Factuuradres </option>                
            <option value="299">Postadres </option>
        </select>

多个select，当某个选项被selected时，unselect其他选项

Multiple select, when one certain option is selected, unselect other options

javascript

jquery

multipleselection