以前、こちらで質問させていただき、完成かと思われたのですが、
さらにもう一つ指示が増え、困っています。
以前の質問: jqueryで複数のselectの情報から表示/非表示を決定したい
https://teratail.com/questions/158504
今回はここに、特定の選択枠が選択された場合、隣のセレクタ を活性化させるというものを追加したいと考えています。
現状のコード
html
1<div class="select-box"> 2<select name="" id="select1"> 3<option value="">初期状態</option> 4<option value="選択1">選択1</option> 5<option value="選択2">選択2</option> 6</select> 7</div> 8 9<div class="select-box"> 10<select name="" id="select2"> 11<option value="">初期状態</option> 12<option value="選択1">選択2</option> 13<option value="特定の選択肢">特定の選択肢</option> 14</select> 15</div> 16 17<div class="select-box" id="selectNumber"> 18<select name="" id="select3"> 19<option value="">初期状態</option> 20<option value="選択1">選択1</option> 21<option value="選択2">選択2</option> 22</select> 23</div> 24 25<div class="box"></div>
それぞれのセレクタ で何かしら選択した場合はboxを表示し、さらに
特定の選択肢を選択した場合はselect3のセレクタ が活性化するというところにもっていきたいのです。
js
1$(function(){ 2 $('#box').hide(); 3 $("#selectNumber").prop('disabled', true).css("opacity",0.6); 4 $('.select-box select').on('change',function(){ 5 console.log($('.select-box').filter(function(){return $(this).val()!=="";}).length); 6 $('#box').toggle($('.select-box select').filter(function(){return $(this).val()!=="";}).length>0) 7 }); 8 9 $('#select2').change(function(){ 10 var extraction_val = $("#select2").val(); 11 if(extraction_val == "特定の選択肢") { 12 $("#selectNumber select").prop('disabled', false).css("opacity",1); 13 } 14 else { 15 $("#selectNumber select").prop('disabled', true).css("opacity",0.6); 16 } 17 }) 18});
上記のように書いたのですが、boxの表示非表示はできるのですが、特定の選択肢を選んだ際にセレクタ が活性化されません。
select-boxで干渉していたりするのが原因なのでしょうか?
なにかヒントでもいただけると大変助かります。
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー