如何在不影响其他下拉菜单的情况下多次使用状态下拉菜单和城市下拉菜单 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>

我使用不同的name 将上述相同的 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>");
                });
            }
        });
    });

希望对你有帮助！