заполнить поле выбора при предыдущем выборе и с помощью клона - PullRequest
Новая
       9

заполнить поле выбора при предыдущем выборе и с помощью клона

0 голосов
/ 27 июня 2018

Я пытаюсь добавить функцию клонирования для блоков выбора. У меня есть 3 поля выбора: страна, штат, город и первый пользователь выбирают страну, а в поле выбора состояния на основе идентификатора заполняются опции, и то же самое с выпадающим списком городов будет заполняться только при выборе штата.

Тогда я должен добавить опцию, где я должен восстановить все. поэтому я клонирую свой 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 снова вызывал, но на данный момент я не могу этого сделать, потому что у меня уже есть опции

1 Ответ

0 голосов
/ 27 июня 2018

что именно вы имеете в виду под "вместо показа нового раскрывающегося состояния его возвраты к предыдущему раскрывающемуся падению". Я попробовал ваш код на скрипке, и он клонируется, как и ожидалось. 

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