JavaScriptでチェックボックスを制御したいです

Question

javascript初心者です。

フォームでチェックボックスにチェックを入れたら、次のセレクトボックスの選択肢が１つになる。という動作を実現したいです。
試行錯誤の末、以下のような書き方で、なんとなくできたのですが、以下のような問題があり困っています。

（問題点１）消えるはずの選択肢を選択した状態でチェックをいれると、その選択肢が残ってしまう。
（問題点２）Safariで動作しない。（Chromeでは動作しました。）

<input type="checkbox" id="color" name="color" value="color" onchange="myfunc(this.value)"/> <label for="color">カラー</label>

<label>
  <select>
    <option value="white" id="hidden">白</option>
	<option value="red">赤</option>
	<option value="block" id="hidden2">黒</option>
	  </select>
</label> 

<script> document.getElementById("hidden").style.display ="block"; document.getElementById("hidden2").style.display ="block"; function myfunc(value) { var color = document.getElementById("color").checked; var hidden = document.getElementById("hidden"); var hidden2 = document.getElementById("hidden2"); if(color == true){ hidden.style.display ="none"; hidden2.style.display ="none"; } else{ hidden.style.display ="block"; hidden2.style.display ="block"; } }</script>

詳しい方、ご教授いただけないでしょうか。
よろしくお願いいたします。

Answer 1

予め代替用のHTML要素をつくっておいて入れ替えるのが妥当
optionの非表示はブラウザによっては反映されません

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const s1=document.querySelector('#s1');
  const s2=s1.cloneNode(true);
  const p=s1.parentNode;
  s2.setAttribute('id','s2');
  s2.querySelectorAll('.hide').forEach(x=>x.remove());
  document.querySelector('#color').addEventListener('change',()=>{
    if([...p.children].includes(s1)){
      p.insertBefore(s2,s1);
      s1.remove();
    }else{
      p.insertBefore(s1,s2);
      s2.remove();
    }
  });
});
</script>
<label><input type="checkbox" id="color" name="color"> カラー</label>
<label>
<select id="s1">
<option value="white" class="hide">白</option>
<option value="red">赤</option>
<option value="block" class="hide">黒</option>
</select>
</label> 

調整版

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const s1=document.querySelector('#s1');
  const s2=s1.cloneNode(true);
  const p=s1.parentNode;
  s2.setAttribute('id','s2');
  s2.querySelectorAll('.hide').forEach(x=>x.remove());
  document.querySelector('#color').addEventListener('change',()=>{
    if([...p.children].includes(s1)){
      p.insertBefore(s2,s1);
      s1.remove();
    }else{
      p.insertBefore(s1,s2);
      s2.remove();
    }
  });
  document.addEventListener('change',()=>{
    const color=document.querySelector('#s1,#s2').value;
    document.querySelectorAll('.s1_select').forEach(x=>{
      x.style.display='none';
      x.querySelector('select').disabled=true;
    });
    document.querySelector('#'+color).style.display='';
    document.querySelector('#'+color+" select").disabled=false;
    ;
  });
});
</script>
<label><input type="checkbox" id="color" name="color"> カラー</label>
<label>
<select id="s1">
<option value="white" class="hide">白</option>
<option value="red">赤</option>
<option value="black" class="hide">黒</option>
</select>
</label> 

<div class="s1_select" id="white">
<label>
<select>
<option value="white1">WHITE1</option>
<option value="white2">WHITE2</option>
</select>
</label>
</div>

<div class="s1_select" id="red" style="display:none">
<label>
<select disabled>
<option value="red1">RED1</option>
<option value="red2">RED2</option>
</select>
</label>
</div>

<div class="s1_select" id="black" style="display:none">
<label>
<select disabled>
<option value="black1">BLACK1</option>
<option value="black2">BLACK2</option>
</select>
</label>
</div>

Comments

[ymnm]

回答ありがとうございます！
思い通りの動作になり、大変助かりました！

ただ、このフォームにはさらに先がありまして、
チェックボックスの下のセレクトボックス１の選択によって、さらに下のセレクトボックス２の内容が変わるという動作を仕込んでおりましたが、そちらに不具合が出てしまいました。。。

具体的に言いますと、
セレクトボックス１で白を選択
↓
セレクトボックス２の選択肢がWHITE1／WHITE２に変化。
↓
チェックボックスにチェックを入れる
↓
セレクトボックス２の選択肢はがRED1／RED２
になってほしいところなのですが、
セレクトボックス２の選択肢はがWHITE1／WHITE２のまま。

コードは以下のようになっております。
甘えてしまい大変心苦しいですが、可能であれば教えていただけますでしょうか。。。

<script>
window.addEventListener('DOMContentLoaded', ()=>{
const s1=document.querySelector('#s1');
const s2=s1.cloneNode(true);
const p=s1.parentNode;
s2.setAttribute('id','s2');
s2.querySelectorAll('.hide').forEach(x=>x.remove());
document.querySelector('#color').addEventListener('change',()=>{
if([...p.children].includes(s1)){
p.insertBefore(s2,s1);
s1.remove();
}else{
p.insertBefore(s1,s2);
s2.remove();
}
});
});
</script>
<label><input type="checkbox" id="color" name="color"> カラー</label>
<label>
<select id="s1">
<option value="white" class="hide">白</option>
<option value="red">赤</option>
<option value="block" class="hide">黒</option>
</select>
</label>

<script>
$(function(){
$('#s1').change(function () {
var val = $(this).val();
var select_id = '#' + val;
$('.s1_select').hide();
$(select_id).show();
});
});
</script>

<div class="s1_select" id="white" style="display: none">
<label>
<select>
<option value="white1">WHITE1</option>
<option value="white2">WHITE2</option>
</select>
</label>
</div>

<div class="s1_select" id="red">
<label>
<select >
<option value="red1">RED1</option>
<option value="red2">RED2</option>
</select>
</label>
</div>

<div class="s1_select" id="black" style="display: none">
<label>
<select>
<option value="black1">BLACK1</option>
<option value="black2">BLACK2</option>
</select>
</label>
</div>

[yambejp]

調整しました

[ymnm]

本当にありがとうございます！
完璧に動作いたしました。感謝いたします。