javascript - 如何多次使用州下拉菜单和城市下拉菜单javascript而不影响其他下拉菜单

Question

我正在使用 CodeIgniter，我有四个选择国家/地区下拉列表，根据国家/地区的不同，该州将显示在下一个下拉列表中，一旦选择了州/地区，城市将显示在下一个选择下拉列表中。

查看

<!--country-->
    <select  class="form_control country_change" name="c_country">
        <option value="" disabled selected>Select Country</option>
         <?php foreach ($get_country as $row) {?>
        <option value="<?php echo $row->id; ?>"><?php echo $row->country_name;?></option>
        <?php }?>
     </select>

    <!--state-->
     <select  class="form_control state_get" name="c_state">
      <option value='' disabled selected>Select state</option>
     </select>

    <!--city-->
     <select  class="form_control city_get" name="c_city">
     <option value="">Select city </option>
     </select>

我有以上相同的 HTML 代码 3 倍，但名称

自定义.js

/*Get all the state name using country code*/
   $(".country_change").on('change',function(){
      var country_id=$(this).val();
  $.ajax({
      url:"<?php echo site_url('Customer_control/statename');?>",
      method:"POST",
      data:"country_id="+country_id,
     dataType: "json",
      success:function(data){
        $('.state_get').empty();
        var placeholder="<option value='' disabled selected>Select state</option>";
        $('.state_get').html(placeholder);
            $.each(data, function(i, data) {
          $('.state_get').append("<option value='" + data.id + "'>" + data.state_name + "</option>");
            });
      }
     });
  });
   /*Get all the city name using state code*/
   $(".state_get").on('change',function(){
      var state_id=$(this).val();
  $.ajax({
      url:"<?php echo site_url('Customer_control/cityname');?>",
      method:"POST",
      data:"state_id="+state_id,
      dataType: "json",
      success:function(data){
        $('.city_get').empty();
        var placeholder="<option value='' disabled selected>Select city</option>";
        $('.city_get').html(placeholder);
        $.each(data, function(i, data) {
        $('.city_get').append("<option value='" + data.id + "'>" + data.cities_name + "</option>");
            });
      }

     });
  });

以上过程对我来说非常有效。我能够根据州名称显示城市，并根据国家/地区显示州。

现在我担心的是，我必须对其余 3 个下拉列表使用相同的脚本。我不想使用额外的 JavaScript。那么如何多次使用同一个脚本而不影响另一个下拉列表呢？

希望您能理解我的问题。你能帮我解决这个问题吗？

Answer 1

您可以在每个下拉列表中使用 id 属性，并在脚本中引用要使用响应数据填充的下拉列表。我给你举一个例子:

HTML:

<select  class="form_control country_change" name="c_country" data-target="dropdown_state_one">
<option value="" disabled selected>Select Country</option>
 <?php foreach ($get_country as $row) {?>
<option value="<?php echo $row->id; ?>"><?php echo $row->country_name;?></option>
<?php }?>

<select  class="form_control state_get" name="c_state" id="dropdown_state_one">
<option value='' disabled selected>Select state</option>

JAVASCRIPT:

$(".country_change").on('change',function(){
        var country_id = $(this).val(),
            state_list = $(this).data('target'); // The dropdown ID
        $.ajax({
            url:"<?php echo site_url('Customer_control/statename');?>",
            method:"POST",
            data:"country_id="+country_id,
            dataType: "json",
            success:function(data){
                $('#'+state_list).empty();
                var placeholder="<option value='' disabled selected>Select state</option>";
                $('#'+state_list).html(placeholder);
                $.each(data, function(i, data) {
                    $('#'+state_list).append("<option value='" + data.id + "'>" + data.state_name + "</option>");
                });
            }
        });
    });

希望对你有帮助!