【JQuery】多個 DropDownList/ComboBox 同步更新

使用JQuery前,需要引用Jquery元件

HTML 頁面
搜尋條件: 職業
   <select id="Drownlist1" > 
       <option value="1">程式設計師</option> 
       <option value="2">系統分析師</option> 
       <option value="3">HR人力資源</option> 
       <option value="4">業務助理</option>
   </select>
<br/><br/>
 <table border="1">
 ....省略
 </table>
 <br/>
 搜尋條件: 職業 <select id="Drownlist2" >
     <option value="1">程式設計師</option> 
     <option value="2">系統分析師</option> 
     <option value="3">HR人力資源</option> 
     <option value="4">業務助理</option>
  </select>

Javascript 部份
<script type="text/javascript">
 $(function() {
     $("#Drownlist1").change(function() {
 $("#Drownlist2").val($("#Drownlist1 option:selected").val());
  });
 
   $("#Drownlist2").change(function() {  
 $("#Drownlist1").val($("#Drownlist2 option:selected").val());
  });
 });
</script>

應用在頁面過長情況下又不想回頭做下拉選擇動作(ex:搜尋,頁碼跳頁等時機)
選擇上面DropDownList時

選擇下面DropDownList時

解說:
1.Get the value of the selected item
  $("#Drownlist1").val()

2. Get the text of the selected item
  $("#Drownlist1 option:selected").text()

3. Find out when the select value changed
  $("#Drownlist1").change(function() { /* do something here */ });

4. Programmatically set the selected item.
   $("#Drownlist1").val(1);

5. Modify the list.
   Clear the list: 
   $("#Drownlist1").html("");

   Add to the list:
   $("<option value='6'>髮型設計師</option>").appendTo("#Drownlist1");