在之前的 select 上填充 select 框并使用克隆

Question

我正在尝试为 select 个盒子添加克隆功能。我有 3 个 select 框：国家、州、城市和第一个用户 select 国家和基于 id 的状态 select 框填充了选项，与城市下拉列表相同，只有在状态时才会填充是 selected。

然后我在重新生成所有内容的地方添加了更多选项。所以我正在克隆我的 div 但是当我更改我的国家而不是显示新的状态下拉列表时出现问题 returns 到以前的下拉列表：

  $('.country').on('change',function(){
        var id = $(this).val();
        callAjax(id);
    });
    $('.state').on('change',function(){
        var id = $(this).val();
        callAjax(id);
    });

  $('#btClone').on('click', function () {

        $('#country')
            .clone()
            .attr('id', 'country_' + i)
            .attr('name', 'country_' + i)
            .appendTo("#container2");
        $('#state')
            .clone()
            .attr('id', 'state_' + i)
            .attr('name', 'state_' + i)
            .appendTo("#container2");
      i =i+1;
    });

我的Html长得像

 <div id="container1">
                <select id="country" name="country" class="hidden country">
                </select>
                <select id="state" name="state" class="hidden state">
                </select>
                <select id="city" name="city" class="hidden city">
                </select>
             <span id="selected-profile"></span>
             <div id="addons" class="hidden">

                <input type="button" id="btClone" value="Clone the list" style="float:right;" />
             </div>
         </div>
        <div id="container2" style="display:none;"></div>

我想当我点击添加新的然后选择国家然后改变一些我的 ajax 再次打电话但是现在我无法这样做因为我已经有选项

Answer 1

"instead of showing new state dropdown its returns to previous drop down" 到底是什么意思？我在 fiddle 中尝试了您的代码，它正在按预期进行克隆。

function initRow($row){
  $row.find('select[name="country"]').on('change', function () {
      var thisRow = $(this).closest('div.row');
      var stateDD = thisRow.find($('select[name="state"]'));
      stateDD.show();

      stateDD.on('change',function(){
        var cityDD = thisRow.find('select[name="city"]');
        cityDD.show();
        cityDD.on('change',function(){

        });
      });
  });
}
$('#container1 .row').each(function(){
 initRow($(this));
});
$('#btClone').click(function(){
 var rowTemplate = $('#container1 > .row').eq(0).clone();
  rowTemplate.find('select[name="state"]').hide();
  rowTemplate.find('select[name="city"]').hide();
 initRow(rowTemplate.appendTo($('#container1')));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container1">
  <div class="row">
    <select name="country" class="hidden country">
      <option value=1>country 1</option> <option value=2>country 2</option>
    </select>
    <select name="state" class="hidden state" style="display:none;">
      <option value=1>state 1</option> <option value=2>state 2</option>
    </select>
    <select name="city" class="hidden city" style="display:none;">
       <option value=1>city 1</option> <option value=2>city 2</option>
    </select>
  </div>
</div>
<input type="button" id="btClone" value="Clone the list" style="float:right;" />

在之前的 select 上填充 select 框并使用克隆

populate select box on previous select and with clone

javascript

php

ajax

jquery

clone