ラジオボタン→セレクトボックスで表示切替がしたい

質問

次のhtml文をラジオボタンではなく、セレクトボックスによる選択に変えることって不可能でしょうか。
参考にしたサイトはこちらです。
https://www.torat.jp/css-radiobotton/
以下はそのソースです。
<form>
<div class="form-check">
<input class="form-check-input" type="radio" name="maker" value="food" onclick="formSwitch()" checked>
<label class="form-check-label"> 好きな食べ物</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="maker" value="place" onclick="formSwitch()">
<label class="form-check-label"> 好きな場所</label>
</div>
</form>

<ul>
<div id="foodList">
<li>お寿司</li>
<li>アイスクリーム</li>
<li>チーズケーキ</li>
<li>お団子</li>
</div>
<div id="placeList">
<li>自由が丘</li>
<li>下北沢</li>
<li>吉祥寺</li>
<li>高円寺</li>
</div>
</ul>
<script>
function formSwitch() {
hoge = document.getElementsByName('maker')
if (hoge[0].checked) {
// 好きな食べ物が選択されたら下記を実行します
document.getElementById('foodList').style.display = "";
document.getElementById('placeList').style.display = "none";
} else if (hoge[1].checked) {
// 好きな場所が選択されたら下記を実行します
document.getElementById('foodList').style.display = "none";
document.getElementById('placeList').style.display = "";
} else {
document.getElementById('foodList').style.display = "none";
document.getElementById('placeList').style.display = "none";
}
}
window.addEventListener('load', formSwitch());
</script>

回答No.4

retorofan

No.3です。
３つ以上でも可能です。
することは、次の２つだけです。
・セレクトボックスで選択したリスト要素を表示属性にする
・それを除いたリスト要素を非表示属性にする（複数）

回答No.3

retorofan

ラジオボタン→セレクトボックスで表示切替がしたい

サンプルを作ってみました。

<h1>セレクトボックスで表示切替</h1>
<select id="select1" onclick="formSwitch2()">
<option selected>好きな食べ物</option>
<option>好きな場所</option>
</select>

<ul>
<div id="foodList">
<li>お寿司</li>
<li>アイスクリーム</li>
<li>チーズケーキ</li>
<li>お団子</li>
</div>
<div id="placeList">
<li>自由が丘</li>
<li>下北沢</li>
<li>吉祥寺</li>
<li>高円寺</li>
</div>
</ul>

<script>
//リスト要素
const lists = document.querySelectorAll('ul div');
lists[1].style.display = 'none';

// セレクトボックスで表示切替
function formSwitch2() {
const select1 = document.getElementById('select1');
const index = select1.selectedIndex;

lists[0].style.display = (index==0) ? '' : 'none';
lists[1].style.display = (index==0) ? 'none' : '';
}
</script>

補足

わかりました。
これが限界みたいですね。
３つ以上には対応していないのですね。

回答No.2

AsarKingChang

>キレてすみませんでした。
キレてないっすよ（立ち位置が逆か？）
なんであれ、リスナーがあるものは、どうにかなりますからね～
（まったく気にしてないので、気楽に～）

回答No.1

AsarKingChang

>セレクトボックスによる選択に変えることって不可能でしょうか。
https://blog-and-destroy.com/28251

結果から言えば可能ですね。
ただ、セレクトって複数選択もあり得るので、
そこら辺のバリデーションは面倒かもしれませんが。
少なくともリスナさえ張れれば後は、どうにかなる！
ってのは、言えるでしょうね。

お礼

すみません、以下のサイトと原理は同じでした。キレてすみませんでした。https://bonoponz.hatenablog.com/entry/2020/05/12/%E3%80%90Web%E3%80%91%E3%83%97%E3%83%AB%E3%83%80%E3%82%A6%E3%83%B3%E3%81%A7%E8%A1%A8%E7%A4%BA%E5%86%85%E5%AE%B9%E3%82%92%E5%88%87%E3%82%8A%E6%9B%BF%E3%81%88%E3%82%8B

補足

貴殿が示されたサイトを実践しても、画面に変化はありませんでした。ヽ(`Д´)ﾉﾌﾟﾝﾌﾟﾝ