使用Jquery、 AJAX 和json文件从下拉列表中选择

xxslljrj 于 2023-08-04 发布在 jQuery

关注(0)|答案(2)|浏览(108)

我正在寻找一些帮助与下面的代码，
我有这个表格，每个下拉列表取决于它上面的一个，所以你根据你的选择是什么，正确的数据将显示在下一个选择。我想下拉列表4（选择房子）激活的基础上下拉列表1选择国家。所以当国家选择。状态（2）和房屋（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>');
 }
});
});

个字符

jquery

来源：https://stackoverflow.com/questions/59196649/dynamic-dependent-select-from-dropdown-using-jquery-and-ajax-and-json-file

2条答案

按热度按时间

vmdwslir1#

已经修复了。这就是我所做的>

$(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>');
 }
});
});

个字符
我刚把最后一个函数改成了

$(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>');
 }
});

型

赞(0）回复(0）举报 2023-08-04

wd2eg0qa2#

相关下拉编辑

<script>
$(document).ready(function(){
$('table').on('click','#edit',function(){
var id = $(this).parents("tr").attr("id");
alert(id);

if(confirm('Are you sure to edit this record ?'))
{ 
    $.ajax({
       url: 'edit.php',
       type: 'GET',
       data: {id: id},
       error: function() {
          alert('Something is wrong');
       },
       success: function(response) {
         $('#submit').hide();
         $('#update').css('display','block');
         
        var data=JSON.parse(response);
        for(i in data){
          alert(data[i].id);
           $('#id').val(data[i].id);
           $('#name').val(data[i].name);
           $('#age').val(data[i].age);
           $('#phone').val(data[i].phone);
           $('#email').val(data[i].email);
           $('#state').val(data[i].state);
           $.ajax({
          url:'drop.php',
          type:'post',
          data:{s_id:data[i].state},
          success:function(res){
            $('#district').html(res);
        
           $('#district').val(data[i].district);
           $('#address').val(data[i].address);
           $('#gender').val(data[i].gender);

          }
         })
        }
        
    }
    });

    }

   })
   })
   </script>

字符串

赞(0）回复(0）举报 2023-08-04

我来回答

使用Jquery、 AJAX 和json文件从下拉列表中选择

2条答案

相关问题

热门标签

最新问答