FIG 1 Effect
2 html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<Title> two drop-down box linkage </ title>
<script src="../js/lib/jquery-3.2.1.min.js"></script>
</head>
<body>
<div>
<Label> Category: </ label>
<select id="select-1" style="width:100px;">
<Option> - Please select - </ option>
</select>
</div>
<div style="margin-top:10px;">
<Label> DETAILED Goods: </ label>
<select style="width:100px;" id="select-2">
<Option> - Please select - </ option>
</select>
</div>
<script src="../js/option.js"></script>
</body>
</html>
3 jq
$(function(){
var arr1 = [ 'food', 'Home', 'Electronics'];
var arr2 = [[ 'vegetables', 'fruit', 'seasoning'], [ 'sofa', 'oven battery', 'refrigerator'], [ 'computer', 'phone', 'charging Po']];
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();
was arr2 arr = [index 1];
for(let i=0;i<arr.length;i++){
$('#select-2').append('<option>'+arr[i]+'</option>');
}
})
})
4 Summary
, Children (); // Gets a child element of the currently selected element
.change (); // change the binding element handler
.not (); // excluded from the selected set of selected elements, not put inside the filter criteria