克隆的 bootstrap-selectpicker 选择关闭 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(); 时，该代码实际上并没有为您的 select 元素克隆您的原始 HTML 标记。当使用 Bootstrap 并为 <select class="selectpicker"> 之类的选择元素编写 HTML 标记时，当您使用类 selectpicker 时，bootstrap javascript 将使用原始 HTML 的一部分将您的原始标记转换为引导程序选择标记。渲染 DOM 后，您在浏览器中与之交互的 select 元素根本不是您最初编写的代码，而是 boostrap 对 HTML 的转换。因此，当您尝试 clone() bootstrap 选择元素然后在其上调用 selectpicker() 时，它试图强制 bootstrap 转换未处于预期转换状态的 HTML，并导致您的意外行为。

解决此问题的一种方法是使您的原始 HTML 标记可重用。一个简单的方法是模板。执行此操作时，您可以获取模板并向其中添加所需的任何视图数据，然后使用 selectpicker()

让引导程序即时转换模板 HTML

这是您最初发布的代码的修改版本，使用 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>