Html下拉框Select聯動實例

在開發網站時，經常會有二個或多個select下拉框聯動的情況，比如省份和城市二個下拉框聯動，在省份下拉框裏選擇不同的省，第二個下拉框城市就要對應該省份下的城市數據。
下面一起來看下，怎麼用Javascript生成這樣的聯動下拉框。

操作方法

（01）首先，看下我們定義的二個數組的數據，一個arr_class， 是班級數據（每條數據包括班級id和班級名稱）另一個是 arr_stu，是學生數據（每條數據包括學生id，所屬班級，學生名稱）。我們例子做的是班級和學生的二個下拉框的聯動。

（02）我們的初始Html代碼，是二個空的select下拉框控件。按這樣的代碼運行，是沒有數據的二個下拉框。

（03）添加JS邏輯，為二個下拉框生成初始數據，我們先寫一個方法，general_select_1，為第一個下拉框填充數據。代碼如圖，主要是循環arr_class數組，用數組的每一項來生成一個下拉選項，然後用Jquery的append方法，加到第一個下拉框裏，

（04）再寫一個方法general_select_2，為第二個下拉框填充數據，這個方法接收一個class_id的參數，根據這個參數來過濾填充的數據。比如class_id為1時，就只填充所屬班級為1的學生。這個方法主要是循環arr_stu數組，用數組裏符合class_id參數的項來生成一個下拉選項，然後用Jquery的append方法，加到第二個下拉框裏，

（05）二個方法寫好，我們就可以在頁面加載完時，調用這二個方法，來填充下拉框的數據，代碼如下。general_select_1(); //這個主要是填充第一個下拉框的數據general_select_2(0); //這個主要是填充第二個下拉框的數據，這裏為什麼傳參數0？ 因為第一個下拉框裏有一個‘請選擇班級’的選項，這是個默認選中的選項，這個選項不是一個具體的班級，所以第二個下拉框裏不應該有學生的數據。

（06）運行後，頁面上的二個下拉框都有數據了。

（07）我們再為第一個下拉框添加事件代碼，當選擇一個班級時，就改變第二個下拉框的數據，填充上對應班級的學生數據。代碼很簡單，先獲取到第一個下拉框選中的項的value值，即選中哪個班級，然後調用方法2，general_select_2， 並把選中的班級id做參數傳進去就行了，方法2就會根據這個班級的參數過濾到正確的數據後，填充到第二個下拉框裏。var class_id = $(this)();general_select_2(class_id);

（08）刷新頁面後，我們改變第一個下拉框的值，第二個下拉框的學生數據就會跟着改變，實現了二個select的聯動。