【发布时间】：2019-12-05 13:50:19
【问题描述】：
我正在为下面的代码寻求帮助，
我有这个表格，每个下拉列表都依赖于它上面的那个，所以你根据你的选择，正确的数据将显示在下一个选择中。我想根据下拉列表 1 选择国家/地区激活下拉列表 4（选择房屋）。所以当国选时。 state(2) 和 house(4) 都将被激活并显示数据。请看下面的截图，
这里是 HTML 代码
$(document).ready(function(){
load_json_data('country');
function load_json_data(id, parent_id)
{
var html_code = '';
$.getJSON('https://raw.githubusercontent.com/ahammoudi/jason_data/master/data.jason', function(data){
html_code += '<option value="">Select '+id+'</option>';
$.each(data, function(key, value){
if(id == 'country')
{
if(value.parent_id == '0')
{
html_code += '<option value="'+value.id+'">'+value.name+'</option>';
}
}
else
{
if(value.parent_id == parent_id)
{
html_code += '<option value="'+value.id+'">'+value.name+'</option>';
}
}
});
$('#'+id).html(html_code);
});
}
$(document).on('change', '#country', function(){
var country_id = $(this).val();
if(country_id != '')
{
load_json_data('state', country_id);
}
else
{
$('#state').html('<option value="">Select state</option>');
$('#city').html('<option value="">Select city</option>');
$('#house').html('<option value="">Select house</option>');
}
});
$(document).on('change', '#state', function(){
var state_id = $(this).val();
if(state_id != '')
{
load_json_data('city', state_id);
}
else
{
$('#city').html('<option value="">Select city</option>');
}
});
$(document).on('change', '#city', function(){
var city_id = $(this).val();
if(city_id != '')
{
load_json_data('house', city_id);
}
else
{
$('#house').html('<option value="">Select house</option>');
}
});
});<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | JSON - Dynamic Dependent Dropdown List using Jquery and Ajax</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<script src="script.js"></script>
<br /><br />
<div class="container" style="width:600px;">
<h2 align="center">JSON - Dynamic Dependent Dropdown List using Jquery and Ajax</h2><br /><br />
<select name="country" id="country" class="form-control input-lg">
<option value="">Select country</option>
</select>
<br />
<select name="state" id="state" class="form-control input-lg">
<option value="">Select state</option>
</select>
<br />
<select name="city" id="city" class="form-control input-lg">
<option value="">Select city</option>
</select>
<br />
<select name="house" id="house" class="form-control input-lg">
<option value="">Select house</option>
<br />
</div>
</body>
</html>【问题讨论】：
-
以防万一有人想查看 json 数据文件，这里是 raw.githubusercontent.com/ahammoudi/jason_data/master/…
-
你的问题是什么？
-
下拉列表 4（选择房屋）需要在选择下拉列表 1（国家/地区）时处于活动状态。当前第 4 号将在选择下拉列表第 3 号（选择城市）时激活。如果你运行代码 sn-p 你会明白我在说什么。
-
好的，根据我的理解，如果你选择第一个下拉菜单 4 个下拉菜单填充，让我知道是正确的，所以我正在准备演示？
-
目前每个下拉菜单都依赖于它上面的一个，例如，下拉数字 2，直到您从下拉数字 1 中选择某些内容后才可用。而下拉数字 3 取决于数字 2。我想要的是，如果我更改此行 $(document).on('change', '#city', function () 到类似这样的 $(document).on('change', '#country', function()，下拉菜单将起作用，但列表不正确，因为我们将变量“city_id”设置为 (this)
标签： javascript jquery html ajax dropdown