Html下拉框Select聯動實例

在開發網站時，經常會有二個或多個select下拉框聯動的情況，比如省份和城市二個下拉框聯動，在省份下拉框里選擇不同的省，第二個下拉框城市就要對應該省份下的城市數據。<br/>下面一起來看下，怎么用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).val();
general_select_2(class_id);
08
刷新頁面后，我們改變第一個下拉框的值，第二個下拉框的學生數據就會跟著改變，實現了二個select的聯動。
End

發表于 2017-09-04 00:00
閱讀 ( 844 )
分類：電腦網絡

Html下拉框Select聯動實例

操作方法

你可能感興趣的文章

相關問題

0 條評論

作家榜 ?

推薦文章