兩個select標籤 一個改變, 另外一個同時改變
阿新 • • 發佈：2018-12-20
以一個例子為準
問題:設計一個學生地址登記網頁, 有兩個select標籤, 一個為省, 一個為市
分析: 如果我們選擇河南省, 則市標籤裡面只能有屬於河南的,選擇吉林省的,也只能有吉林的,即要實現對省標籤進行操作後, 市標籤根據選擇, 進行部分顯示,部分隱藏
準備解決: 用到jquery, js,
解決程式碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>上傳</title> </head> <!-- 引入jquery, 這裡寫的是筆者自己的路徑, 請讀者自己下載jquery並自己進行設定 --> <script type="text/javascript" src="../js/jquery-3.2.1.js"></script> <body> <select name="province" id="province"> <option value = "河南省">河南省</option> <option value = "吉林省">吉林省</option> </select> <select name="city" id="city"> <!-- 給市加了一個自定義屬性province, 用來標誌市屬於哪一個省 --> <option value = "河南省的城市1" province="河南省">河南省的城市1</option> <option value = "河南省的城市2" province="河南省">河南省的城市2</option> <option value = "吉林省的城市1" province="吉林省">吉林省的城市1</option> <option value = "吉林省的城市2" province="吉林省">吉林省的城市1</option> </select> </body> <script type="text/javascript"> // 頁面載入初始化, 預設是河南省第一個城市, 如果有興趣, 可以試一試不初始化是什麼情況, 筆者沒有試過 $(function() { //對省進行選擇, 選擇河南省 $("#province>option[value='河南省']").attr("selected", true); //對市進行選擇 $("#city> option").hide();//先全部隱藏 var selectWord = "#city> option[province = '" + "河南省" + "']";//進行選擇的語句,太長了, 就在外面進行拼接了 $(selectWord).show();//選擇屬性province為河南省的那一部分顯示,其他的由於前面hide()不會顯示 $(selectWord).eq(0).attr("selected", true); }) //****************************重要******************************************************* //這個是最主要的事件, 當選擇的省份進行改變的時間, 對市進行判斷選擇 $("#province").change(function() { //獲取當前選中的省份名稱 var province = $("#province").val(); //先將所有城市進行隱藏並設定為未選中 $("#city > option").attr("selected", false).hide(); // 條件選擇選擇 var selectWord = "#city> option[province = '" + province + "']"; // 將province屬性為選中的省的option設定為顯示, 並且排在第一個的標籤設定為選中(不設定選中可能會出現bug,讀者可以試一試刪除.eq(0).attr("selected", true)) $(selectWord).show().eq(0).attr("selected", true);//部分顯示 }); //************************************************************************************* </script> </html>