下記のドロップダウンメニューで、
「1.県名」と「2.ふりがな」が完全に連動するjavascriptをご教示ください。
県名を先に選択しても、ふりがなを先に選択しても
対応する項目が自動で選択される動作を希望しております。
<html>
<head></head>
<body>
<form>
1.県名<br>
<select name="Address1" class="forms1">
<option value=""></option>
<option value="0">東京</option>
<option value="1">神奈川</option>
<option value="2">埼玉</option>
<option value="3">千葉</option>
</select>
2.ふりがな<br>
<select name="Address2" class="forms1">
<option value=""></option>
<option value="0">とうきょう</option>
<option value="1">かながわ</option>
<option value="2">さいたま</option>
<option value="3">ちば</option>
</select>
</form>
</body>
</html>
No.1ベストアンサー
- 回答日時:
それぞれのselectにonchangeを追加します。
<select name="Address1" class="forms1"
onchange="document.getElementsByName('Address2')[0].selectedIndex=this.selectedIndex">
<select name="Address2" class="forms1"
onchange="document.getElementsByName('Address1')[0].selectedIndex=this.selectedIndex">
steel_grayさん、いつもお世話になります。
早速のご教示ありがとうございました。
動作のほうもばっちりでした。
思ったより短いコードで実現できるので驚きました。
(お礼が遅くなって失礼しました)
No.2
- 回答日時:
<select name="Address1" class="forms1" onchange="this.form.Address2.selectedIndex=this.selectedIndex">
<select name="Address2" class="forms1" onchange="this.form.Address1.selectedIndex=this.selectedIndex">
でも参照できますね。
ただ、不要なアクセシビリティな気もします。
Address2はあくまでもreadonlyのテキストボックスなどで処理しておいた
ほうがよいのでは?
yambejpさん、ご教示ありがとうございました。
(お礼が遅くなって失礼しました)
動作のほうもばっちりでした。
>ただ、不要なアクセシビリティな気もします。
わたしもそう思います。「readonlyのテキストボックス」でも
いいですね。不特定多数が見るサイトではないので
どういう形がいいか、検討してみます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript JavascriptからSQLへ繋ぎ方が分からない 3 2022/07/07 00:27
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript 中百舌鳥駅と深井駅を入れ替えて選択しても同じ挙動にしたいです。 2 2022/06/24 18:45
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript 電車の運賃を出すプログラムを作っています。 2 2022/06/22 09:36
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
セレクトボックスの幅をプルダ...
-
HTMLのoptionタグ部分に画像を...
-
submitをボタン以外にするには
-
1アクションでPOST・GET、両方...
-
リンクをクリックした時にform...
-
動的にnema属性が変化する場合...
-
inputタグのclass名にコロン「:...
-
1つのformで複数のactionを実...
-
javasqliptで複数のテキストボ...
-
JavaScript 超初心者です。 Doc...
-
親ページからインラインフレー...
-
送信ボタン押下時に値が未入力...
-
複数のフォームを一括で送信す...
-
GETをPOSTに変更したところ 送...
-
submitの処理の後別の画面を表...
-
フォーム送信後の画面について...
-
同じnameのhiddenで別々の内容...
-
CGI動作後に元のページに戻る方法
-
フォーム要素以外にもname属性...
-
一括で値を入力するには?
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
HTMLのoptionタグ部分に画像を...
-
プルダウンメニュー項目のフォ...
-
セレクトボックスの値による入...
-
セレクトボックスの幅をプルダ...
-
複数のプルダウンからリンクす...
-
プルダウンメニューでインライ...
-
<SELECT>タグでの selected 状...
-
クリックすると下に項目が出て...
-
セレクトボックスを切り替える...
-
前ページのリンクからフォーム...
-
プルダウンメニューアイテムの...
-
VB6.0でコントロール配列の配列...
-
jQuery if文の条件分岐 (。ノд...
-
リストボックス全選択について
-
プルダウンメニューで、選択項...
-
複数のプルダウンの値をパラメ...
-
プルダウンの切り替えについて
-
jQuery要素の絞り込み + <selec...
-
switch文のswitch(n)の部分を複...
-
プルダウンを2つ以上並べる時に...
おすすめ情報