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的聯動。