セレクトボックスで一つ目の選択肢と二つ目の選択肢が重複しないようにしたい

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8</head>
9<body>
10    <form name="checker">
11        <select name="defence1">
12            <option value="fire">ほのお</option>
13            <option value="water">みず</option>
14            <option value="grass">くさ</option>
15        </select>
16        <select name="defence2">
17            <option value="none">なし</option>
18            <option value="fire">ほのお</option>
19            <option value="water">みず</option>
20            <option value="grass">くさ</option>
21        </select>
22    </form>
23
24<script>
25    
26</script>
27</body>
28</html>

上のコードのように二つのセレクトボックスがあり、例えば一つ目のセレクトボックスでほのおを選んだとしたら、二つ目のセレクトボックスからは同じほのおの選択肢を削除し、またその状態から一つ目のセレクトボックスでみずを選んだら、二つ目のセレクトボックスからはみずを削除し、削除されていたほのおを再び追加するというふうに、二つのセレクトボックスの選択肢が重複しないようにしたいです。これらをJavaScriptを使って実装したいです。

条件分岐で実装しようと考え試し、選択肢を削除することはできたのですが、選択肢が削除されるたびにインデックス番号がずれるため、うまく削除したい選択肢を削除することができませんでした。また削除されたものを再び追加するという処理のイメージが湧きません。

配列に全タイプ入れて、for or while文でリストを生成、1つ目の選択を感知して選択したものと同じものをfor文で探して削除すればいいというヒントをいただき、検索をかけて調べたのですが、リストを生成し、for文で探すという処理が理解できませんでした。

前述したものを実現するためにはどうすれば良いのでしょうか。答えでなくてもヒントをいただけるだけでも幸いです。（JavaScriptについてまだあまり深く理解できていないため、噛み砕いた説明をしていただけると嬉しいです。）

int32_t

2022/05/24 07:48

ユーザがdefence2で選んだ選択肢はdefence1から削除したいですか? 初期状態はどうなるべきですか? <select> は選択していない状態にできないので、質問文のHTMLをロードした時点では両方「ほのお」になってしまいます。

k-nirvana-69

2022/05/24 08:06 編集

削除したいです。初期状態は二つ目のセレクトボックスの最初の選択肢は「なし」に変更しました。ロードした時点で一つ目のセレクトボックスは「ほのお」になっているので、二つ目のセレクトボックスからは「ほのお」が削除された状態にしておきたいです。

行動規範の内容に同意します

回答2件

ベストアンサー

defence1 defence2 それぞれの change イベントにおいて、

イベントが起きた方のvalueプロパティを変数 newValue とする
イベントが起きなかった方の options プロパティでループを行い、オプションの value プロパティが newValue と等しかったら disabled プロパティに true をセットする、そうでなければ disabled プロパティに false をセットする。

こんな感じでやるのがいいでしょう。オプションを削除してしまうと復元するのが面倒なので、disabled プロパティで無効化します。無効化の見た目が不満でしたら、hidden プロパティで隠すこともできます。

投稿2022/05/24 14:02

int32_t

総合スコア21929

k-nirvana-69

2022/05/24 14:23

ご回答ありがとうございます。 optionsプロパティでループを行うの意味が理解できないです。その部分についてもう少しだけ具体的に教えていただけますと幸いです。

int32_t

2022/05/24 14:27

変数 s に <select> が入っているとして、 for (let o of s.options) { o.disabled = ...; } ということです。

k-nirvana-69

2022/05/24 14:49

なるほどです。 optionsプロパティでループすることによってオプションのvalueがnewValueと同じかどうか順番に調べていくというようなイメージで合ってますか？

int32_t

2022/05/24 15:12

そんな感じです！

k-nirvana-69

2022/05/24 15:13

ありがとうございます！

行動規範の内容に同意します

適当な共通のクラスをつけるなどセレクタを調整すればこんな感じでできると思います

javascript
1<script>
2document.addEventListener('change',e=>{
3  const t=e.target;
4  const selector='.type';
5  if(t.matches(selector)){
6    const vals=[...document.querySelectorAll('.type')].filter(x=>x.value!=='').map(x=>x.value);
7    document.querySelectorAll(selector).forEach(x=>{
8      [...x.querySelectorAll('option')]
9         .map(y=>(y.disabled=false,y))
10         .filter(y=>vals.filter(z=>z!==x.value).includes(y.value))
11         .forEach(y=>{
12           y.disabled=true;
13         });
14    });
15  }
16});
17</script>
18
19<select name="defence1" class="type">
20<option value="">---</option>
21<option value="fire">ほのお</option>
22<option value="water">みず</option>
23<option value="grass">くさ</option>
24</select>
25<select name="defence2" class="type">
26<option value="">---</option>
27<option value="fire">ほのお</option>
28<option value="water">みず</option>
29<option value="grass">くさ</option>
30</select>
31<select name="defence3" class="type">
32<option value="">---</option>
33<option value="fire">ほのお</option>
34<option value="water">みず</option>
35<option value="grass">くさ</option>
36</select>