Клонированные выборки начальной загрузки-выбора отключены на 1

Question

Когда я клонирую выпадающий список начальной загрузки, клонированный выпадающий список, кажется, смещает выборки на 1. Т.е., если я нажимаю второй вариант, выбирается первый.

Например:

• Если в исходном раскрывающемся списке нажать «Новый замок», то будет выбран «Новый замок»

• Если я нажму "Новый замок" в раскрывающемся списке клонированный , то будет выбран "Кент"

Я получаю ошибку:

bootstrap-select.js:2727 Uncaught TypeError: Cannot read property 'firstChild' of undefined

Почему это может происходить?

JSFiddle об ошибке здесь: http://jsfiddle.net/jh4wztab/1/

Ниже мой код:

var count = 2;
$(document).on("click", "#clonejurisdiction", function() {
     addselectpicker(count);
     count++;
});

     function addselectpicker(juriscount) {
            juriscount = parseInt(juriscount)
        var picker = $('#jurisdictionpicker');
        var clone = picker.clone();
        var pickercount = juriscount + 1;
        clone.attr("id",'jurisdiction' + juriscount);
        clone.find(".selectpicker").attr("id",'jurisdictionpicker' + juriscount);
        clone.find("[data-id='jurisdiction_']").hide();
        clone.appendTo(".juris_name");
        clone.find('.selectpicker').selectpicker();
        clone.find(":input").attr("placeholder", "Enter a State, County");

      }

HTML

<div id="jurisdictionpicker">
<select class="selectpicker jurisdiction" data-live-search="true" data-size="8" title="Select County, State" id="jurisdiction_">
<optgroup label="Popular">
  <option value='317'>Kent</option>
  <option value='318'>New Castle</option>
  <option value='1859'>New York</option>
</optgroup>
<optgroup label="Jurisdictions">
<option value='1'>Autauga</option>
<option value='2'>Baldwin</option>
<option value='3'>Barbour</option>
<option value='4'>Bibb</option>
</optgroup>
</select>
</div>
<button id="clonejurisdiction">
Clone
</button>
<BR><B>Cloned version:</B>
<div class="juris_name">
</div>

Answer 1

Ваша основная проблема заключается в том, что при попытке сделать var clone = picker.clone(); этот код на самом деле не клонирует исходную HTML-разметку для вашего элемента select. При использовании Bootstrap и написании HTML-разметки для элемента select, например <select class="selectpicker">, при использовании класса selectpicker загрузочный javascript преобразует исходную разметку в начальную разметку select, используя части исходного HTML. После визуализации DOM элемент select, с которым вы взаимодействуете в вашем браузере, - это уже не код, который вы изначально написали, а преобразование вашего Boostrap вашего HTML. Поэтому, когда вы пытались clone() загрузить элемент начальной загрузки, а затем вызывать selectpicker(), он пытался заставить загрузчик преобразовать HTML, который не находился в состоянии, в котором он ожидал, чтобы преобразовать его, и вызывал ваш неожиданное поведение.

Одним из способов решения этой проблемы является повторное использование исходной HTML-разметки. Простой способ сделать это - шаблонизировать. При этом вы можете получить свой шаблон и добавить к нему все необходимые данные представления, а затем запустить загрузку, преобразовав HTML-шаблон на лету, используя selectpicker()

Вот модифицированная версия исходного кода, в котором вы используете Mustache.js для шаблонных целей. Это выполняет то, что вы хотели без исходной ошибки выбора:

Вот обновленный JSFiddle .

JavaScript:

var count = 1;
$(document).ready(function() {
    $("#someDiv").append(getJurisdictionPicker(count));
});

$(document).on("click", "#clonejurisdiction", function() {
     var picker = getJurisdictionPicker(count);
     $("#jurisName").append(picker);
});

function getJurisdictionPicker(juriscount) {
    var template = $("#jurisdictionPickerTemplate").html();
    var data = { counter : juriscount };
    var templatedText = Mustache.render(template, data);
    var temp = $(document.createElement("div")).html(templatedText);
    temp.find(".selectpicker").selectpicker();
    count++;

    return temp;
}

HTML:

<script id="jurisdictionPickerTemplate" type="text/template">
    <div id="jurisdictionpicker{{ counter }}">
        <select class="selectpicker" data-live-search="true" data-size="8" title="Select County, State">
            <optgroup label="Popular">
                <option value='317'>Kent</option>
                <option value='318'>New Castle</option>
                <option value='1859'>New York</option>
                </optgroup>
            <optgroup label="Jurisdictions">
                <option value='1'>Autauga</option>
                <option value='2'>Baldwin</option>
                <option value='3'>Barbour</option>
                <option value='4'>Bibb</option>
            </optgroup>
        </select>
    </div>
</script>

<div id="someDiv">
</div>
<button id="clonejurisdiction">
    Clone
</button>
<BR><B>Cloned version:</B>
<div id="jurisName">
</div>
<BR><BR>
If I click "New Castle" in the original dropdown, then "New Castle" is selected<BR>
If I click "New Castle" in the <B>cloned</B> dropdown, then "Kent" is selected<BR>