使用Jquery、Ajax和json文件从下拉菜单中动态选择依赖项

11 浏览
0 Comments

使用Jquery、Ajax和json文件从下拉菜单中动态选择依赖项

我需要一些关于下面代码的帮助，

我有一个表单，每个下拉菜单都依赖于上面的菜单，所以根据你的选择，下一个选择框上会显示相应的数据。我希望当选择国家时，下拉菜单4（选择房屋）能够激活。因此，当选择国家后，州（2）和房屋（4）都将被激活并显示数据。请参考下面的截图，

链接：https://i.stack.imgur.com/Smmnl.png

以下是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 += '';
  $.each(data, function(key, value){
   if(id == 'country')
   {
    if(value.parent_id == '0')
    {
     html_code += '';
    }
   }
   else
   {
    if(value.parent_id == parent_id)
    {
     html_code += '';
    }
   }
  });
  $('#'+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('');
  $('#city').html('');
  $('#house').html('');
 }
});
$(document).on('change', '#state', function(){
 var state_id = $(this).val();
 if(state_id != '')
 {
  load_json_data('city', state_id);
 }
 else
 {
  $('#city').html('');
 }
});
$(document).on('change', '#city', function(){
 var city_id = $(this).val();
 if(city_id != '')
 {
  load_json_data('house', city_id);
 }
 else
 {
  $('#house').html('');
 }
});
});




 
  Webslesson Tutorial | JSON - Dynamic Dependent Dropdown List using Jquery and Ajax
  
  
  
 
 
  
  
   
JSON - Dynamic Dependent Dropdown List using Jquery and Ajax