如何使用Jquery動態生成二級選項列表
阿新 • • 發佈：2020-02-06
這篇文章主要介紹瞭如何使用Jquery動態生成二級選項列表,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
想寫一個多級聯動的選項列表，並且我想要動態生成，但是我看了好多部落格看得我暈乎乎的，就自己查了一些jq 的方法自己嘗試些了一下，下面放上我實現的效果和原始碼
實現效果：
原始碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--引入jquery框架-->
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
// 在函式中新增選項列表聯動的事件
$(function() {
// 定義兩個陣列,既然是二級聯動的列表,那麼第二個列表肯定就是二維的了,也就是下面的city陣列
var pro = ['省份一','省份二','省份三'];
var city = [
['1','2','3'],['4','5'],['6']
];
//使用一個for迴圈設定好省份的選項列表,這一步比較簡單,邏輯也比較清晰
// append():新增選項
// val():返回當前選項值
// html():給返回的當前選項新增內容
for(var i = 0; i < pro.length; i++) {
$("#pp").append($("<option></option>").val(i + 1).html(pro[i]));
}
// 這裡是監聽第一個選項列表的改變事件,也就是當我們選中省份中的某一項時,第二個列表會顯示出相對應的城市名字
$('#pp').change(function() {
//定義一個變數,存放選中的項是第幾項,然後減去一個1作為二維陣列的下標
var index = $(this).val() - 1;
// 設定屬性值
$("#cc").prop("length",1);
for(var i = 0; i < city[index].length; i++) {
$("#cc").append($("<option></option>").val(i + 1).html(city[index][i]));
}
})
})
</script>
</head>
<body>
<!--先在body中定義好連個下拉列表-->
<select id="pp">
<option selected="selected">請選擇</option>
</select>
<select id="cc">
<option selected="selected">請選擇</option>
</select>
</body>
</html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。