東京都の地域（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】選択メニューを作成するソースコードでした！