使用 Jquery 和 Ajax 和 json 文件从下拉列表中进行动态依赖选择

Question

I'm looking for some help with the code below,我正在寻找有关以下代码的帮助，

I have this form that each dropdown list depends on the one above it, so you based on what your selection is, the right data will show on the next selection.我有这个表格，每个下拉列表都取决于它上面的下拉列表，所以你根据你的选择是什么，正确的数据将显示在下一个选择中。 I want dropdown list 4 (select house) activate based on dropdown list 1 select country.我想根据下拉列表 1 选择国家/地区激活下拉列表 4（选择房屋）。 so when the country selected.所以当国家选择。 both state(2) and the house(4) will be activated and showing data. state(2) 和 house(4) 都将被激活并显示数据。 see screenshot below,看下面的截图，

here is the HTML code这是 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>

Answer 1

has been fixed.已修复。 here is what i did>这是我所做的>

 $(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', '#country', function(){ var country_id = $(this).val(); if(country_id == 1) { load_json_data('house', 7); } else if(country_id == 2) { load_json_data('house', 8); } else { $('#house').html('<option value="">Select house</option>'); } }); });

 <!DOCTYPE html> <html> <head> <title>Webslesson Tutorialx</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 x</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>

i just changed the last function to我刚刚将最后一个功能更改为

$(document).on('change', '#country', function(){
 var country_id = $(this).val();
 if(country_id == 1)
 {
  load_json_data('house', 7);
 }
 else if(country_id == 2)
 {
  load_json_data('house', 8);
 }
 else
 {
  $('#house').html('<option value="">Select house</option>');
 }
});

使用 Jquery 和 Ajax 和 json 文件从下拉列表中进行动态依赖选择

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-12-07 02:55:42

使用 Jquery 和 Ajax 和 json 文件从下拉列表中进行动态依赖选择

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-12-07 02:55:42

解决方案1
0 已采纳 2019-12-07 02:55:42