ラジオボタンの選択によってセレクトメニューのoptionを表示・非表示を行いたい

Question

radioボタンの選択によって、selectのoptionを表示非表示にしたかったですが、
IE、iOSではうまくいきませんでした。

<input type="radio" name="sample" id="radio01" onclick="entryChange1();" value="エー"/><label for="radio01">エー</label>
<input type="radio" name="sample" id="radio02" onclick="entryChange1();" value="ビー" /><label for="radio02">ビー</label>

ラジオボタンの「ビー」が選択されたときのみセレクトメニュー「20:00～21:00」を非表示にする

<select name="セレクトサンプル" id="seminar-time">
<option value="" selected="selected">お選び下さい</option>
<option value="11:00～12:00">11:00～12:00</option>
<option value="14:00～15:00">14:00～15:00</option>
<option value="20:00～21:00" id="none-radio02">20:00～21:00</option>
</select>

function entryChange1(){
	radio = document.getElementsByName('sample')
	if(radio[0].checked) {
		//A.1つ目が選択されたら下記を実行
		document.getElementById('seminar-time').disabled = false;
		document.getElementById('none-radio02').hidden = false;
		var obj = document.getElementById('seminar-time');
		obj.selectedIndex = 0;
	}else if(radio[1].checked) {
		//B.2つ目が選択されたら下記を実行
		document.getElementById('seminar-time').disabled = false;
		document.getElementById('none-radio02').hidden = true;
		var obj = document.getElementById('seminar-time');
		obj.selectedIndex = 0;
	}
}

window.onload = entryChange1;

こんな感じで、chrome、firefoxはうまく動作しました。

解決方法を調べていて、
下記URLの解決策もやってみたのですが、optionをspanの入れ子にしたら、切り替えたいoptionがラジオボタンの選択を切り替えても非表示のままでうまくいきませんでした。
https://netamame.com/safari-select-option_display-none

ご教示願います。

追記です。

function entryChange1(){
	radio = document.getElementsByName('sample')
	if(radio[0].checked) {
		document.getElementById('seminar-time').disabled = false;
		$('#none-radio02').unwrap("<span>");

		var obj = document.getElementById('seminar-time');
		obj.selectedIndex = 0;
	}else if(radio[1].checked) {
		document.getElementById('seminar-time').disabled = false;
		$('#none-radio02').wrap("<span>");
		var obj = document.getElementById('seminar-time');
		obj.selectedIndex = 0;
	}
}

window.onload = entryChange1;

上記のようにすると
ラジオボタン「エー」を２回押してしまうと

$('#none-radio02').unwrap("<span>");

があるため<select>タグが消えてしまいます。

<option value="" selected="selected">お選び下さい</option>
<option value="11:00～12:00">11:00～12:00</option>
<option value="14:00～15:00">14:00～15:00</option>
<option value="20:00～21:00" id="none-radio02">20:00～21:00</option>

いい方法はありませんでしょうか？

Answer 1

IE の場合、基本は select 要素の再作成ということになります。

// 読み込み時に保存しておく。
var original = document.getElementById('seminar-time').cloneNode(true);

    var clone = original.cloneNode(true);
    if (radio[1].checked) {
      var target = clone.querySelector('#none-radio02');
      target.parentNode.removeChild(target);
    }

    var select = document.getElementById('seminar-time');
    select.parentNode.replaceChild(clone, select);

Comments

[buk]

回答ありがとうございます。
上記のコードをどのように組み込めばよろしいでしょうか？

[x_x]

前者は entryChange1 実行前に、
後者は entryChange1 内の判定部分です。
何をしているか理解して使ってください。

[buk]

もうしわけありませんが、具体的なコードをご教授願いませんでしょうか。

[x_x]

すべて具体的なコードなのですが、どの部分が具体的ではないと判断したのでしょうか？

[buk]

x_x様が回答くださったコードを、
私が最初に質問の際に記述したコードに組み込んだ場合のコードを知りたいです。

[x_x]

最初のコメントで書いたようにそのまま当てはめればいいのでコードを変更する必要はありません。
理解できないコードがあるのでしょうか？

[buk]

ではコードはこちらでいいのでしょうか？
function entryChange1(){
radio = document.getElementsByName('sample')
if(radio[0].checked) {
//A.1つ目が選択されたら下記を実行
document.getElementById('seminar-time').disabled = false;
document.getElementById('none-radio02').hidden = false;
var obj = document.getElementById('seminar-time');
obj.selectedIndex = 0;
}else if(radio[1].checked) {
//B.2つ目が選択されたら下記を実行
document.getElementById('seminar-time').disabled = false;
document.getElementById('none-radio02').hidden = true;
var obj = document.getElementById('seminar-time');
obj.selectedIndex = 0;
}
}

window.onload = entryChange1;

// 読み込み時に保存しておく。
var original = document.getElementById('seminar-time').cloneNode(true);

var clone = original.cloneNode(true);
if (radio[1].checked) {
var target = clone.querySelector('#none-radio02');
target.parentNode.removeChild(target);
}

[buk]

x_x様が回答くださったコードを、どこに入れていいのかわかりません。
私の最初にコメントしたコードの挿入位置、順番がわかりません。
こう書けば動作するとう完成されたコードを教えてください。
よろしくお願いいたします。

[x_x]

https://codepen.io/anon/pen/arjNpe
わからないコードがあるなら調べたほうがいいです。

[buk]

ありがとうございます。
実装はできました。
メールフォームで使おうと思ったのですが、submitボタンを押しても、反応(入力確認画面へ飛ばなくなった)がなくなってしまいました。
なにかコードで関係している部分があるのでしょうか

[x_x]

さすがにこの質問とは関係なくないですか？
コードを理解しないと何が起こっているのかさえわからないのではないでしょうか？

[buk]

了解しました。
ありがとうございました。

Answer 2

optionタグをspanなどで囲み、span自体を非表示とすることで表示・非表示の切り替えができるそうです。https://stackoverflow.com/questions/9234830/how-to-hide-a-option-in-a-select-menu-with-css

ーーー

上記方法は、selectの仕様に反しているとご指摘を頂きました。
ブラウザの実装によって、挙動が変わる可能性がありますので、利用しないようお願いします。

Comments

[x_x]

select の子としては option、optgroup、script、template しか取れません。
https://html.spec.whatwg.org/multipage/form-elements.html#the-select-element

[mar-kn]

仕様ありがとうございます。
selectの仕様上、やってはいけないことなのですね。
https://stackoverflow.com/questions/9234830/how-to-hide-a-option-in-a-select-menu-with-css
今のChromeではどうかわかりませんが、Chrome60では動かないという報告もありました。