Q&A
ご回答ありがとうございます。
試してみましたが、チェックを入れていない状態でも、1〜5の選択肢が表示されてしまいました。。。
関係あるかわかりませんが、実は以前教えていただいたこのコード内での動きを想定しておりまして、
（カラーのチェックを入れるとREDの選択肢が増える想定です）
この場合だと、スタイルシートが効かないのでしょうか。。。
https://teratail.com/questions/328849
重ね重ね申し訳ありません。おわかりになりますでしょうか。
javascript初心者です。
チェックボックスにチェックを入れると、次のセレクトボックスの選択肢が増える、という動作を実現したいです。
チェックを入れなければ選択肢は6〜10、チェックをいれたら1〜10になる、というものです。
色々と調べていて、以下のような書き方にたどり着いたのですが、動作しませんでした。
（元々idで制御していたコードを、classに書き換えたつもりです。）
どなたかご教授いただけますと幸いです。
html
1<input type="checkbox" name="" value="" onclick="checkdiv(this,'ans')"><label for=""> 選択肢が増える</label> 2 3<select> 4<option value="1" style="display:none;" class="ans">1</option> 5<option value="2" style="display:none;" class="ans">2</option> 6<option value="3" style="display:none;" class="ans">3</option> 7<option value="4" style="display:none;" class="ans">4</option> 8<option value="5" style="display:none;" class="ans">5</option> 9<option value="6">6</option> 10<option value="7">7</option> 11<option value="8">8</option> 12<option value="9">9</option> 13<option value="10">10</option> 14</select>}
javascript
1function checkdiv( obj,'class' ) { 2if( obj.checked ){ 3document.getElementsByClassName('ans').style.display = "block"; 4} 5else { 6document.getElementsByClassName('ans').style.display = "none"; 7} 8}
回答2件
0
HTML
1<input type="checkbox" name="" value="" onclick="checkdiv(this,'ans')"><label for=""> 選択肢が増える</label> 2 3<select> 4<option value="1" style="display:none;" class="ans">1</option> 5<option value="2" style="display:none;" class="ans">2</option> 6<option value="3" style="display:none;" class="ans">3</option> 7<option value="4" style="display:none;" class="ans">4</option> 8<option value="5" style="display:none;" class="ans">5</option> 9<option value="6">6</option> 10<option value="7">7</option> 11<option value="8">8</option> 12<option value="9">9</option> 13<option value="10">10</option> 14</select> 15 16<script> 17 function checkdiv(obj, className) { 18 Array.from(document.getElementsByClassName(className)).forEach(e => { e.style.display = obj.checked ? "block" : "none"; }); 19 } 20</script>
display:noneの要素が選択（selected）されている場合については工夫が必要ですね。
投稿2021/06/14 12:58
総合スコア8402
0
ベストアンサー
CSS
1<style> 2#chk:not(:checked) ~ * .ans{display:none} 3</style> 4<input type="checkbox" id="chk"><label for="chk">選択肢が増える</label> 5<select> 6<option value="">選択</option> 7<option value="1" class="ans">1</option> 8<option value="2" class="ans">2</option> 9<option value="3" class="ans">3</option> 10<option value="4" class="ans">4</option> 11<option value="5" class="ans">5</option> 12<option value="6">6</option> 13<option value="7">7</option> 14<option value="8">8</option> 15<option value="9">9</option> 16<option value="10">10</option> 17</select>
投稿2021/06/14 10:15
総合スコア116724
OSとブラウザの種類とバージョンは？
お返事ありがとうございます。
Mac OS Mojava 10.14.6
Google Chrome バージョン: 91.0.4472.101（Official Build）
です。
これで増えたり減ったりしませんか？
（といっても回答をcodepenにコピペしただけですが）
https://codepen.io/yambejp/pen/poeQqme
スマホでも確認できますけど・・
winならchrome.firefox,edgeで動作していますが・・・
ご丁寧にありがとうございます。確認できました。
試行錯誤してましたら、原因がわかりました。
実際のコードでは、チェックボックスをdivで囲ってあり、それが動作をしない原因のようです。
このような感じです。
<div class="abox">
<input type="checkbox" id="chk"><label for="chk">選択肢が増える</label>
</div>
<div class="bbox">
<div class="cbox">
<select>
<option value="">選択</option>
<option value="1" class="ans">1</option>
<option value="2" class="ans">2</option>
<option value="3" class="ans">3</option>
<option value="4" class="ans">4</option>
<option value="5" class="ans">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
</div>
構造がきまっているならjsでやるしかないですね
window.addEventListener('DOMContentLoaded', ()=>{
const chk=document.querySelector('#chk');
const func=()=>document.querySelectorAll('.ans').forEach(x=>x.style.display=chk.checked?"":"none");
func();
chk.addEventListener('change',func);
});
ありがとうございます。そうなんですね。。。ご手数おかけして申し訳ありませんでした。
おかげさまで動作したのですが、safari（mac、iOSどちらも）とiOSのchromeで、チェックをいれなくても選択肢が出てしまい、頭を悩ませています。
macのchrome、winのchrome、edge、firefoxでは問題ありませんでした。
これは、なにか解決法がありますでしょうか。。。
safariとIEは鬼門ですね、さすがにIEは無視していいですか？
IEは無視していただいて大丈夫です！
window.addEventListener('DOMContentLoaded', ()=>{
const sel=document.querySelector('select');
const opt=[...document.querySelectorAll('option')];
const chk=document.querySelector('#chk');
const func=()=>{
sel.innerHTML="";
opt.filter(x=>!x.classList.contains('ans') || chk.checked).forEach(x=>sel.appendChild(x));
sel.selectedIndex=0;
}
func();
chk.addEventListener('change',()=>{
func();
});
});
ありがとうございます。本当にすいません。
確かにこの部分だけだといけるんですが、実際のコードに追加すると、セレクトボックスがおかしくなってしまいます。
かなり入り組んでいますので、他の部分との兼ね合いなのだと思います。。
実際はこのようなコードです。
<div>
<div>
<input type="checkbox" id="chk" name="chkc" value="chk"><label for="chk"> 選択肢がBのみになり、Bの選択肢1〜5が増える</label>
</div>
</div>
<div>
<select id="abc">
<option value="a" class="hide">A</option>
<option value="b">B</option>
<option value="c" class="hide">C</option>
</select>
</div>
<div class="abc123" id="a">
<div class="form_pulldown">
<select>
<option value="a1">a1</option>
<option value="a2">a2</option>
<option value="a3">a3</option>
<option value="a4">a4</option>
<option value="a5" selected>a5</option>
</select>
</div>
</div>
<div class="abc123" id="b" style="display:none">
<div>
<select disabled>
<option value="b1" class="ans">b1</option>
<option value="b2" class="ans">b2</option>
<option value="b3" class="ans">b3</option>
<option value="b4" class="ans">b4</option>
<option value="b5" class="ans">b5</option>
<option value="b6">b6</option>
<option value="b7">b7</option>
<option value="b8">b8</option>
<option value="b9">b9</option>
<option value="b10" selected>b10</option>
</select>
</div>
</div>
<div class="abc123" id="c" style="display:none">
<div>
<select disabled>
<option value="c1">c1</option>
<option value="c2">c2</option>
<option value="c3">c3</option>
<option value="c4">c4</option>
<option value="c5" selected>c5</option>
</select>
</div>
</div>
<script>
//チェックを入れると次の選択肢がB、その次の選択肢もbだけになる
window.addEventListener('DOMContentLoaded', ()=>{
const abc=document.querySelector('#abc');
const s2=abc.cloneNode(true);
const p=abc.parentNode;
s2.setAttribute('id','s2');
s2.querySelectorAll('.hide').forEach(x=>x.remove());
document.querySelector('#chk').addEventListener('change',()=>{
if([...p.children].includes(abc)){
p.insertBefore(s2,abc);
abc.remove();
}else{
p.insertBefore(abc,s2);
s2.remove();
}
});
document.addEventListener('change',()=>{
const chk=document.querySelector('#abc,#s2').value;
document.querySelectorAll('.abc123').forEach(x=>{
x.style.display='none';
x.querySelector('select').disabled=true;
});
document.querySelector('#'+chk).style.display='';
document.querySelector('#'+chk+" select").disabled=false;
;
});
});
//チェックを入れるとb1〜b5の選択肢が追加される
window.addEventListener('DOMContentLoaded', ()=>{
const sel=document.querySelector('select');
const opt=[...document.querySelectorAll('option')];
const chk=document.querySelector('#chk');
const func=()=>{
sel.innerHTML="";
opt.filter(x=>!x.classList.contains('ans') || chk.checked).forEach(x=>sel.appendChild(x));
sel.selectedIndex=0;
}
func();
chk.addEventListener('change',()=>{
func();
});
});
</script>
セレクトボックスが複数あるのはきいてないです
複数あるならidで管理して下さい、それときちんと仕様の説明もお願いします
safariはおそらくoptionを隠すことができないので
それなりの書き方が必要です
お返事ありがとうございます。申し訳ありません。
勝手に他にはからませずにできると思っておりました。。。
idで管理というのは、
const sel=document.querySelector('#b');
ということですよね。すいません。それくらいは自分で気づくべきでした。
仕様は非常にややこしいのですが、
セレクトボックスAの選択肢によってその下のセレクトボックス が変わります。
その上で、チェックボックスにチェックを入れるとセレクトボックス Aの選択肢はbのみになり、さらにセレクトボックスb の選択肢に（b1〜b5）が追加される。
というものです。
●チェックボックス
●セレクトボックス A
a／b／c
・セレクトボックス a
a1〜a5
・セレクトボックス b
（b1〜b5）※チェック時に追加
b6〜b10
・セレクトボックス c
c1〜c5
これってa/b/cのセレクトボックスわけないとだめですか？
nameを分けたいなら分ける必要はありますが・・・
お返事ありがとうございます。
確かに分けなくても可能かもしれません。。。
セレクトボックス Bにすべてまとめて、選択肢の表示を制御する、ということですよね。
ちなみに実現したいのは、この申し込みフォーム２ページ目の
❹ 現在の電力プラン（契約電力単位）と契約電力を選択してください
の部分とほとんど同じものになります。
https://looop-denki.com/low-v/apply/
ありがとうございます！！
完璧に動作しました。感動です。根気強くお付き合いいただき、本当にありがとうございます！
色々と不手際があり、ご迷惑をおかけいたしました。
最後にひとつだけ、恥を忍んで、うかがっていいでしょうか。
これ、逆にチェックを入れると選択肢b１〜b５が「減る」という風にするには、どのように変えればよいのでしょうか。。。
重ね重ね本当にすいません。
申し上げにくいのですが、実は実現したいのは逆であると今更気づきました。すいません。。
えーと
A/B/CでBを選ぶ場合はb1-b10が表示で、チェックするとBだけになって
b6-b10になればいいですか？
お返事ありがとうございます。その通りでございます。。。
o2.filter(x=>x.classList.contains(s1.value) && !x.classList.contains('ans')|| chk.checked && x.classList.contains('ans')).forEach(x=>s2.appendChild(x));
↓↓↓
o2.filter(x=>x.classList.contains(s1.value) && (!chk.checked || chk.checked && !x.classList.contains('ans'))).forEach(x=>s2.appendChild(x));
でいけると思います
お返事ありがとうございます。
いけました！ありがとうございました‥！
感謝してもしきれません。。ご迷惑ばかりおかけして申し訳ありませんでした。
長々とお付き合いいただき、本当にありがとうございました。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/06/15 09:31