• ベストアンサー

2つの<select>フォームの完全連動(自動選択)

下記のドロップダウンメニューで、 「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>

質問者が選んだベストアンサー

  • ベストアンサー
  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答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">

litton101
質問者

お礼

steel_grayさん、いつもお世話になります。 早速のご教示ありがとうございました。 動作のほうもばっちりでした。 思ったより短いコードで実現できるので驚きました。 (お礼が遅くなって失礼しました)

すると、全ての回答が全文表示されます。

その他の回答 (1)

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答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のテキストボックスなどで処理しておいた ほうがよいのでは?

litton101
質問者

お礼

yambejpさん、ご教示ありがとうございました。 (お礼が遅くなって失礼しました) 動作のほうもばっちりでした。 >ただ、不要なアクセシビリティな気もします。 わたしもそう思います。「readonlyのテキストボックス」でも いいですね。不特定多数が見るサイトではないので どういう形がいいか、検討してみます。

すると、全ての回答が全文表示されます。

関連するQ&A

専門家に質問してみよう