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代码上使用不同的name多3倍

Custom.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：

chrome.exe --remote-debugging-port=9222

<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 }?>

JAVASCRIPT：

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

希望对您有所帮助！

如何在不影响其他下拉菜单的情况下多次使用州下拉菜单和城市下拉菜单javascript

1 个答案: