我正在使用 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 次以上不同的name

自定义.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。那么，如何才能多次使用相同的脚本而不影响另一个下拉菜单呢？

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

解决方案

您可以在每个下拉列表中使用 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>");
                });
            }
        });
    });

我希望这对你有帮助！