セレクトボックスを２つ並べて、一方を選択するともう一方は常に選択解除されている（連動している）選択可能なセレクトボックスを作成したい。

Question

2つで1セット、連動している2つのセレクトボックスを作成したいと思っています。
ネット検索でjqueryあたりを用いて作成するのであろうか、と推測はしているのですが

片方群を選択しているともう片方は選択されていない。
片方群を選択済な状態で、もう片方群を選択すると、先の選択済みの方のセレクトボックスは、何を選択していても解除される、
というものを作成したいのですが、正解が見当たらずに悩んでおります…

進むことがサンプルとしまして、以下ですが

<script type="text/javascript">
$(function() {
    $('button').click(function(){
        $('option').attr('selected', false);
    });
});
</script>

<button>ここをクリックしてください</button>
<br><br><br>
<select id="aaa" name="example1" size="3">
<option value="sample1" selected>sample1</option>
<option value="sample2">sample2</option>
<option value="sample3">sample3</option>
</select>
<br><br><br>



<select id="bbb" name="example2" size="3">
<option value="sample4">sample4</option>
<option value="sample5" selected>sample5</option>
<option value="sample6">sample6</option>
</select>

とまでは進めたのですが…、これですと
ページを読み込んだ時から選択されているsample1と　sample5は解除できますが
その後手動で選択ものは解除できないですし、
example1とexpamle2、どちらか片方のみ選択されているものではないです・・
そして　ボタン：ここをクリックしてください　を押して動作するものであって、
セレクトボックスを選択することによって発動するものでもありません・・・

セレクトボックスを選択することにより、もう一方は解除される、
という２つの連動したセレクトボックスを作成したいのですが、
すみませんが…よろしくお願い致します・・

Answer 1

<select id="aaa" name="example1" size="3" data-target="#bbb">
  <option value="sample1" selected>sample1</option>
  <option value="sample2">sample2</option>
  <option value="sample3">sample3</option>
</select>
<select id="bbb" name="example2" size="3" data-target="#aaa">
  <option value="sample4">sample4</option>
  <option value="sample5" selected>sample5</option>
  <option value="sample6">sample6</option>
</select>

$( function() {
      $( 'select' ).on( 'change', function(){
            $( $( this ).attr( 'data-target' ) + ' option:selected' ).attr( 'selected', false );
      } ).eq( 0 ).trigger( 'change' );
} );
```**動くサンプル：**[https://jsfiddle.net/sh8pnxgj/](https://jsfiddle.net/sh8pnxgj/)


---

**追記：**


要件を満たしていなかったので修正。

```HTML
<select id="aaa" name="example1" size="3">
  <option value="sample1" selected>sample1</option>
  <option value="sample2">sample2</option>
  <option value="sample3">sample3</option>
</select>
<select id="bbb" name="example2" size="3">
  <option value="sample4">sample4</option>
  <option value="sample5" selected>sample5</option>
  <option value="sample6">sample6</option>
</select>
<select id="ccc" name="example2" size="3">
  <option value="sample4">sample4</option>
  <option value="sample5" selected>sample5</option>
  <option value="sample6">sample6</option>
</select>

$( function() {
      $( 'select' ).on( 'change', function(){
            $( 'select:not(#' + $( this ).attr( 'id' ) + ') option:selected' ).prop( 'selected', false );
      } ).eq( 0 ).trigger( 'change' );
} );
```**動くサンプル：**[https://jsfiddle.net/sh8pnxgj/1/](https://jsfiddle.net/sh8pnxgj/1/)

Comments

[x_x]

> ページを読み込んだ時から選択されているsample1と　sample5は解除できますが
> その後手動で選択ものは解除できない
と言っているので、selected属性ではできないでしょう

[kei344]

指摘ありがとうございます。もろもろ修正しました。

[sin77pan]

kei344様
単刀直入に申し上げて、そのまま出来ました・・！
有難うございました!!!

Answer 2

こんな感じで、3つ以上でも自分以外の選択を外せます

<script>
$(function(){
  $('select').on('change',function(){
    var idx=$('select').index(this);
    $('select:not(:eq('+idx+'))').val(null);
  });
});
</script>
<select id="aaa" name="example1" size="3">
<option value="sample1">sample1</option>
<option value="sample2">sample2</option>
<option value="sample3">sample3</option>
</select><br>
<select id="bbb" name="example2" size="3">
<option value="sample4">sample4</option>
<option value="sample5">sample5</option>
<option value="sample6">sample6</option>
</select><br>
<select id="bbb" name="example3" size="3">
<option value="sample7">sample7</option>
<option value="sample">sample8</option>
<option value="sample9">sample9</option>
</select>

Comments

[sin77pan]

yambejp様
yambejp様に頂けたコードで正にそのまま出来ました！！
先にkei344様にご回答を頂けたので、ベストアンサーはkei344様に時間の順でつけさせて頂きましたが、
大変に有難うございました！！！！！