【JavaScript】ドロップダウン選択メニューとラジオボタンを作成するソースコード

この記事は約4分で読めます。
ポートフォリオ制作実績

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

【CSS#26】BootstrapとjQueryでアカウント情報のドロップダウンメニューを作る
パスワード変更、ログアウトのボタンが入ったアカウント情報のドロップダウンメニューをプログラミングで作りましょう。 ナビゲーションバーでお問い合わせやプロフィールなどを作った後は、その下にこういうものをつけたくなるでしょう。 完成...

 

ちなみに東京都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】選択メニューを作成するソースコードでした!

 

 

 

 

タイトルとURLをコピーしました