演示图
实例
<!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>Document</title>
<script src="../0522/static/js/jquery-3.4.1.js"></script>
</head>
<body>
<label for="pro">商品</label>
<select name="" id="pro"></select>
<label for="city">***</label>
<select name="" id="city"></select>
<label for="area">型号</label>
<select name="" id="area"></select>
<p id="addr"></p>
<script>
$(function(){
// 获取产品下拉框
$.getJSON('inc/1.json',function(data){
var option = '<option value="">选择产品</option>';
$.each(data,function(index){
option += '<option value="'+data[index]['proId']+'">'+data[index]['proName']+'</option>';
});
$('#pro').html(option);
})
});
// 获取***列表
$('#pro').change(function(){
// 查看是否选择这个商品
console.log($(this).find(':selected').text());
$.getJSON('inc/2.json',function(data){
var option = '<option value="">选择***</option>';
$.each(data,function(index){
// 判断当前城市所属的的省id是否与前一个省id相等
if(data[index]['proId'] === parseInt($('#pro').val())){
option += '<option value="'+data[index]['cityId']+'">'+data[index]['cityName']+'</option>';
}
});
$('#city').html(option);
});
});
// 型号列表
$('#city').change(function(){
// console.log($(this).find(':selected').text());
$.getJSON('inc/3.json',function(data){
var option = '<option value="">选择型号</option>'
$.each(data,function(index){
if (data[index]['cityId'] === parseInt($('#city').val())) {
option +='<option value="'+data[index]['areaId']+'">'+data[index]['areaName']+'</option>';
}
});
$('#area').html(option);
});
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例