２つの<select>フォームの完全連動（自動選択）

解決済

質問者：litton101
質問日時：2008/06/19 11:04
回答数：2件

下記のドロップダウンメニューで、

「１．県名」と「２．ふりがな」が完全に連動する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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： steel_gray
回答日時：2008/06/19 11:39

それぞれのselectにonchangeを追加します。

- 0
- 件

通報する

この回答へのお礼

steel_grayさん、いつもお世話になります。

早速のご教示ありがとうございました。
動作のほうもばっちりでした。
思ったより短いコードで実現できるので驚きました。

（お礼が遅くなって失礼しました）

通報する

お礼日時：2008/06/22 22:03

No.2

回答者： yambejp
回答日時：2008/06/19 11:49

<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のテキストボックスなどで処理しておいた
ほうがよいのでは？

- 0
- 件

通報する

この回答へのお礼

yambejpさん、ご教示ありがとうございました。
（お礼が遅くなって失礼しました）

動作のほうもばっちりでした。

＞ただ、不要なアクセシビリティな気もします。

わたしもそう思います。「readonlyのテキストボックス」でも
いいですね。不特定多数が見るサイトではないので
どういう形がいいか、検討してみます。

通報する

お礼日時：2008/06/22 22:05

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！