Question

我正在尝试为选择框添加克隆功能。我有3个选择框：国家，州，城市和第一位用户选择国家，并在ID的基础上用选项填充状态选择框，并且只有在选择状态时才填充城市下拉列表。

然后，我在重新生成所有内容的地方添加了更多选项。因此，我正在克隆div，但是当我更改国家/地区而不是显示新的州/州下拉列表时，问题就变成了以前的下拉列表：

  $('.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

“不是显示新的状态下拉列表，而是返回到先前的下拉列表”，这是什么意思？我在小提琴中尝试了您的代码，它正在按预期进行克隆。

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;" />

用克隆填充先前选择的选择框

1 个答案: