- ベストアンサー
２つの<select>フォームの完全連動（自動選択）
下記のドロップダウンメニューで、 「１．県名」と「２．ふりがな」が完全に連動するjavascriptをご教示ください。 県名を先に選択しても、ふりがなを先に選択しても 対応する項目が自動で選択される動作を希望しております。 <html> <head></head> <body> <form> １．県名<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> ２．ふりがな<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>
- litton101
- お礼率89% (1106/1240)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
それぞれの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">
その他の回答 (1)
- yambejp
- ベストアンサー率51% (3827/7415)
<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のテキストボックス」でも いいですね。不特定多数が見るサイトではないので どういう形がいいか、検討してみます。
お礼
steel_grayさん、いつもお世話になります。 早速のご教示ありがとうございました。 動作のほうもばっちりでした。 思ったより短いコードで実現できるので驚きました。 （お礼が遅くなって失礼しました）