하나의 특정 옵션을 선택한 경우 다중 선택, 다른 옵션을 선택 취소

Question

내 HTML에 다중 선택 목록이 있습니다. 값 296이 선택되면 다른 모든 옵션은 선택 취소되어야합니다.

$("#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>

내가 방법을 알아낼 수없는 것 :

이

내가 내가 여러 옵션을 선택하고자 할 때 Ctrl 키를 사용하지 않아도 그렇게 사용하고있는 코드입니다 값 296을 선택하면 다른 옵션을 모두 선택 취소 할 수 있습니다.

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>