javascript - 克隆的 bootstrap-selectpicker 选择关闭 1

Question

当我克隆一个 bootstrap-select 下拉菜单时，克隆的下拉菜单似乎将选择偏移 1。即，如果我单击第二个选项，则会选择第一个。

例如:

• 如果我在原始下拉列表中单击“New CaSTLe”，则会选择“New CaSTLe”

• 如果我在克隆下拉列表中点击“New CaSTLe”，则会选择“Kent”

我得到的错误是:

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 的一部分将您的原始标记转换为 bootstraps select 标记。一旦 DOM 被渲染，您在浏览器中与之交互的 select 元素根本不是您最初编写的代码，它是 boostrap 对 HTML 的转换。所以当你尝试 clone() Bootstrap 选择元素，然后调用 selectpicker()在它上面，它试图强制 Bootstrap 转换未处于预期转换状态的 HTML，并导致您出现意外行为。

解决此问题的一种方法是使您的原始 HTML 标记可重用。一种简单的方法是使用模板。执行此操作时，您可以获得模板并向其添加所需的任何 View 数据，然后使用 selectpicker() Bootstrap 动态转换您的模板 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>