2つのプルダウンを連動させたい

Question

お世話になります。
現在、HTMLとjavascriptを駆使してページを作っているのですが、どうしてもわからないところがあるのでご質問させていただきます。

現在知りたいこととしましては、ページ内にある2つのプルダウンを同じ動きにしたいことであり、例えば、同じものを表示するプルダウンがあります。片方のプルダウンを選択すると、もう片方のプルダウンも同じものが選択されている状態にしたいのです。

  <p><label>職業</label>
  <select name="job">
     <option value="office">会社員</option>
     <option value="public">公務員</option>
     <option value="self">自営業・自由業</option>
     <option value="student">学生</option>
     <option value="house">主婦</option>
     <option value="other">その他</option>
  </select>
  </p>
  <p><label>職業</label>
  <select name="job">
     <option value="office">会社員</option>
     <option value="public">公務員</option>
     <option value="self">自営業・自由業</option>
     <option value="student">学生</option>
     <option value="house">主婦</option>
     <option value="other">その他</option>
  </select>
  </p> 

一応、仮のHTMLですが、2つのプルダウンが同じ動きをするためにはどのようにしたらよいのでしょうか？
ご教示のほどよろしくお願いいたします。

Answer 1

だいぶ省略した書き方になりますが、双方向ならこんな感じでどうでしょう
二つならこれでもいいかもしれませんが、もし３つ以上ある場合は煩雑になってしまいますので、何かしらで纏めたほうがいいかもしれません

<script> $(function() { $("#job1").on('change',function(){ <!--job1のvalueを取得して、job2のvalueを書き換える--> }); $("#job2").on('change',function(){ <!--job2のvalueを取得して、job1のvalueを書き換える--> }); }); </script> <p><label>職業</label> <select id="job1"> <option~ </select> </p> <p><label>職業</label> <select id="job2"> <option~ </select> </p>

Comments

[U1720]

回答ありがとうございます。
見よう見まねになるかとは思いますが、回答の方を参考にページを作っていきたいと思います。

[nagata_se]

補足になりますが、jqueryを使用しているので、jqueryのダウンロードを行うか、<script> 部分の上の行に
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
等を書き足してくださいね

Answer 2

SelectBoxが両方職業なので、一方向なのか両方向なかわかりませんが、
以下の方法で出来ると思います。

一方方向として、
職業1が変更された時と仮定して、
changeイベントを利用すると出来ると思います。

jqueryのサンプルとなりますが、以下の様な感じです。
https://api.jquery.com/change/

changeしたあとに、同期したいselectboxの値をcheckedして上げると出来ると思います。

Comments

[U1720]

回答ありがとうございます。
今回制作しているものとしては、両方向ですね。同じページ内に同じプルダウンを2つ設置して、どちらからでも選択して同じものを表示するものを作りたいです。

一応、参考となるページを見ながら作りたいと思います。