東京都の地域(23区、東京都下など)、住みたい都道府県を例にドロップダウン型の選択メニューとラジオボタンを作ってみました。

ちなみに東京都23区外の地域はこちらです。
東京都23区外の地域
・八王子市
・町田市
・府中市
・調布市
・西東京市
・小平市
・三鷹市
・日野市
・立川市
・東村山市
・多摩市
・武蔵野市
・青梅市
・国分寺市
・小金井市
・東久留米市
・昭島市参考: https://www.metro.tokyo.lg.jp/tosei/tokyoto/profile/gaiyo/kushichoson.html
自分のサイトにメニューを作っておしゃれにしてみましょう。
大学生やIT転職でもポートフォリオにもお役立てください。
目次
東京都の地域を選択するメニューを作る
1. <html></html>内のソースコード
<script type=”text/javascript”>
<!–
function TN(TO){ TO.to.options[0].text = "東京都23区内"; TO.to.options[1].text = ''新宿"; TO.to.options[2].text = "渋谷"; TO.to.options[3].text = "品川"; } function TK(TO){ TO.to.options[0].text = "東京都下"; TO.to.options[1].text = "八王子"; TO.to.options[2].text = "多摩"; TO.to.options[3].text = "小金井"; }
//–>
</script>
2. <body></body>内のhtmlソースコード
<form name=”TOKYO”>
<input type=”radio” name=”tokyo” value=”TONAI” onClick=”TN(this.form)”> 東京都23区内
<input type=”radio” name=”tokyo” value=”TOKA” onClick=”TK(this.form)”> 東京都下
<select name=”to”>
<option>東京都23区内か東京都下を選択
<option>———–
<option>———–
<option>———–
</select>
</form>
都道府県ランキングを作る
1. <html></html>内のソースコード
<script type=”text/javascript”>
<!–
function TN(TO){ TO.to.options[0].text = "住みたい都道府県"; TO.to.options[1].text = ''1位:沖縄県"; TO.to.options[2].text = "2位:東京都"; TO.to.options[3].text = "3位:北海道"; } function TK(TO){ TO.to.options[0].text = "満足度の高い都道府県"; TO.to.options[1].text = "1位:北海道"; TO.to.options[2].text = "2位:福岡県"; TO.to.options[3].text = "3位:沖縄県"; }
//–>
</script>
2. <body></body>内のhtmlソースコード
<form name=”TOKYO”>
<input type=”radio” name=”tokyo” value=”TONAI” onClick=”TN(this.form)”>住みたい都道府県
<input type=”radio” name=”tokyo” value=”TOKA” onClick=”TK(this.form)”>満足度の高い都道府県
<select name=”to”>
<option>都道府県ランキングを選択
<option>———–
<option>———–
<option>———–
</select>
</form>
まとめ
ドロップダウン型の選択メニューとラジオボタンの作り方はこちらのサイトも詳しいです。
きちんと表示されましたか?
以上、【JavaScript】選択メニューを作成するソースコードでした!