jq實現簡單的二級聯動下拉框

時間 2019-11-08

標籤實現簡單二級聯動下拉欄目 JavaScript 简体版

原文原文鏈接

1 效果圖html

2 htmljquery

<!DOCTYPE html>

<head>

<title>二級聯動下拉框</title>

</head>

<body>

<div>

</select>

</div>

</select>

</div>

</body>

</html>

3 jqapp

$(function(){

var arr1 = ['食材','家居','電子產品'];

var arr2 = [['蔬菜','水果','調料'],['沙發','電池爐','冰箱'],['電腦','手機','充電寶']];

for(let i=0;i<arr1.length;i++){

$('#select-1').append('<option>'+arr1[i]+'</option>');

}

$('#select-1').change(function(){

$('#select-2').children().not(':eq(0)').remove();

var index = $(this).children('option:selected').index();

var arr = arr2[index-1];

for(let i=0;i<arr.length;i++){

$('#select-2').append('<option>'+arr[i]+'</option>');

}

})

4 總結函數

,children();//獲取當前選中元素的一級子元素ui

.change();//綁定元素改變的處理函數this

.not();//從選中集合中剔除選中的元素，not裏面放篩選條件code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。