具体性に欠けるタイトルで申し訳ありません。
現在、Ruby on Railsを用いたアプリケーションの作成を行っております。
例えば、選択できる要素に
- りんご
- みかん
- いちご
- バナナ
- もも
の5つの要素があるとして、
またセレクトボックスは3つあるとします。
(セレクトボックス1、2、3とします)
この時、セレクトボックス1で「りんご」を選択した場合、
セレクトボックス2と3では「みかん」、「いちご」、「バナナ」、「もも」しか選べないようになり、
またセレクトボックス1と2でそれぞれ「りんご」と「みかん」を選んだ場合、
セレクトボックス3では「いちご」、「バナナ」、「もも」しか選べなくなる、といった実装を行いたいです。
どのセレクトボックスから選ぶのかは、順不同としたいです。
このような場合、どのようなコードを書けば良いのでしょうか?
おそらくJavaScriptを使うのだろうと言うことはわかるのですが、そこから手がつけられない状況です・・・。
どなたかわかる方がいらっしゃいましたら、よろしくお願いいたします。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/03/29 08:27
2018/03/29 08:28
2018/03/29 08:35 編集
2018/03/29 08:39
2018/03/29 08:59
回答3件
0
ベストアンサー
ざっくり書いてみました。どうだろー
js
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8"> 5<title>test</title> 6<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 7<script> 8 $(function() { 9 10 // class="test-list" が選択された時のイベント 11 $(".test-list").on("change", function() { 12 13 // 「.test-list に属するoptionで」「valueが空でない」「現在選択中」の value を取得して 14 // 配列に溜めておく 15 var selectedValues = []; 16 $(".test-list option:not([value='']):selected").each(function() { 17 var $opt = $(this); 18 selectedValues.push($opt.val()); 19 }); 20 21 // 「.test-list に属するoptionで」「valueが空でない」「現在選択中ではない」ものをloopで回す 22 $(".test-list option:not([value='']):not(:selected)").each(function() { 23 var $opt = $(this); 24 var val = $opt.val(); 25 26 // チェック対象のoptionのvalueが、selectedValuesに存在するものならdisabledにする 27 // そうでないならdisabled解除 28 if ($.inArray(val, selectedValues) >= 0) { 29 $opt.prop("disabled", true); 30 } else { 31 $opt.prop("disabled", false); 32 } 33 }); 34 35 }); 36 37 }); 38</script> 39</head> 40<body> 41 42 <div> 43 選択1: 44 <select class="test-list"> 45 <option value="">未選択</option> 46 <option value="red">あか</option> 47 <option value="blue">青</option> 48 <option value="yellow">YELLOW</option> 49 </select> 50 </div> 51 52 <div> 53 選択2: 54 <select class="test-list"> 55 <option value="">未選択</option> 56 <option value="red">あか</option> 57 <option value="blue">青</option> 58 <option value="yellow">YELLOW</option> 59 </select> 60 </div> 61 62 <div> 63 選択3: 64 <select class="test-list"> 65 <option value="">未選択</option> 66 <option value="red">あか</option> 67 <option value="blue">青</option> 68 <option value="yellow">YELLOW</option> 69 </select> 70 </div> 71 72 </body> 73</html>
投稿2018/03/29 08:57
総合スコア1126
0
もっと効率的な処理があるような気がしますが、とりあえず動くバージョン
javascript
1window.addEventListener('DOMContentLoaded', function(e){ 2 var nodes=document.querySelectorAll('.s'); 3 Array.prototype.forEach.call(nodes,function(n){ 4 n.addEventListener('change',function(){ 5 Array.prototype.forEach.call(nodes,function(n){ 6 Array.prototype.forEach.call(n.querySelectorAll('option:disabled'),function(n){ 7 n.disabled=false; 8 }); 9 }); 10 Array.prototype.map.call(nodes,function(n){ 11 return n.selectedIndex; 12 }).filter(function(idx){ 13 return idx>0; 14 }).forEach(function(idx){ 15 Array.prototype.forEach.call(nodes,function(n){ 16 if(n.selectedIndex!==idx) n.querySelectorAll('option')[idx].disabled=true; 17 }); 18 }); 19 }); 20 }); 21});
HTML
1<select name="s1" class="s"> 2<option value="">------</option> 3<option value="りんご">りんご</option> 4<option value="みかん">みかん</option> 5<option value="いちご">いちご</option> 6<option value="バナナ">バナナ</option> 7<option value="もも">もも</option> 8</select> 9<select name="s2" class="s"> 10<option value="">------</option> 11<option value="りんご">りんご</option> 12<option value="みかん">みかん</option> 13<option value="いちご">いちご</option> 14<option value="バナナ">バナナ</option> 15<option value="もも">もも</option> 16</select> 17<select name="s3" class="s"> 18<option value="">------</option> 19<option value="りんご">りんご</option> 20<option value="みかん">みかん</option> 21<option value="いちご">いちご</option> 22<option value="バナナ">バナナ</option> 23<option value="もも">もも</option> 24</select> 25
valueの比較バージョン
javascript
1window.addEventListener('DOMContentLoaded', function(e){ 2 var nodes=document.querySelectorAll('.s'); 3 Array.prototype.forEach.call(nodes,function(n){ 4 n.addEventListener('change',function(){ 5 Array.prototype.forEach.call(nodes,function(n){ 6 Array.prototype.forEach.call(n.querySelectorAll('option:disabled'),function(n){ 7 n.disabled=false; 8 }); 9 }); 10 Array.prototype.map.call(nodes,function(n){ 11 return n.value; 12 }).filter(function(v){ 13 return v!==""; 14 }).forEach(function(v){ 15 Array.prototype.forEach.call(nodes,function(n){ 16 if(n.value!==v) n.querySelector('option[value='+v+']').disabled=true; 17 }); 18 }); 19 }); 20 }); 21});
HTML
1<select name="s1" class="s"> 2<option value="">------</option> 3<option value="りんご">りんご</option> 4<option value="みかん">みかん</option> 5<option value="いちご">いちご</option> 6<option value="バナナ">バナナ</option> 7<option value="もも">もも</option> 8</select> 9<select name="s2" class="s"> 10<option value="">------</option> 11<option value="もも">もも</option> 12<option value="みかん">みかん</option> 13<option value="バナナ">バナナ</option> 14<option value="いちご">いちご</option> 15<option value="りんご">りんご</option> 16</select> 17<select name="s3" class="s"> 18<option value="">------</option> 19<option value="いちご">いちご</option> 20<option value="みかん">みかん</option> 21<option value="りんご">りんご</option> 22<option value="もも">もも</option> 23<option value="バナナ">バナナ</option> 24</select>
補足
デフォルト値がある場合の処理
javascript
1<script> 2window.addEventListener('DOMContentLoaded', function(e){ 3 var nodes=document.querySelectorAll('.s'); 4 Array.prototype.forEach.call(nodes,function(n){ 5 n.trigger=function(eventStr){ 6 if (document.createEvent) { 7 var e = document.createEvent("HTMLEvents"); 8 e.initEvent(eventStr, true, true ); 9 return this.dispatchEvent(e); 10 } else { 11 var e = document.createEventObject(); 12 return this.fireEvent("on"+eventStr, e); 13 } 14 }; 15 n.addEventListener('change',function(){ 16 Array.prototype.forEach.call(nodes,function(n){ 17 Array.prototype.forEach.call(n.querySelectorAll('option:disabled'),function(n){ 18 n.disabled=false; 19 }); 20 }); 21 Array.prototype.map.call(nodes,function(n){ 22 return n.value; 23 }).filter(function(v){ 24 return v!==""; 25 }).forEach(function(v){ 26 Array.prototype.forEach.call(nodes,function(n){ 27 if(n.value!==v) n.querySelector('option[value='+v+']').disabled=true; 28 }); 29 }); 30 }); 31 }); 32 nodes[0].trigger('change'); 33}); 34</script> 35<select name="s1" class="s"> 36<option value="">------</option> 37<option value="りんご">りんご</option> 38<option value="みかん">みかん</option> 39<option value="いちご" selected>いちご</option> 40<option value="バナナ">バナナ</option> 41<option value="もも">もも</option> 42</select> 43<select name="s2" class="s"> 44<option value="">------</option> 45<option value="もも">もも</option> 46<option value="みかん">みかん</option> 47<option value="バナナ">バナナ</option> 48<option value="いちご">いちご</option> 49<option value="りんご" selected>りんご</option> 50</select> 51<select name="s3" class="s"> 52<option value="">------</option> 53<option value="いちご">いちご</option> 54<option value="みかん" selected>みかん</option> 55<option value="りんご">りんご</option> 56<option value="もも">もも</option> 57<option value="バナナ">バナナ</option> 58</select>
投稿2018/03/29 08:51
編集2018/03/29 09:20総合スコア114775
0
順不同で選択だけしたいのなら、<select multiple>
を使えば何も考えずに実装できます(参考)。
ただし、使い勝手は良くないので、別なGUIライブラリを入れるほうがいいでしょう。
投稿2018/03/29 08:24
総合スコア145183
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。