用克隆填充先前選擇的選擇框

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