Question

当我克隆引导选择下拉列表时，克隆的下拉列表似乎使选择偏移1。即，如果我单击第二个选项，则会选择第一个选项。

例如：

如果我在原始下拉菜单中单击“新城堡”，则选择了“新城堡”
如果在克隆的下拉列表中单击“新城堡”，则选择了“肯特”

我得到的错误是：

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

为什么会这样？

错误的JSFiddle在这里：tutorial

下面是我的代码：

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">之类的select元素编写HTML标记时，当您使用类selectpicker时，bootstrap javascript会使用原始HTML的一部分将您的原始标记转换为bootstrap select标记。呈现DOM后，您在浏览器中与之交互的select元素根本不是您最初编写的代码，而是boostrap对HTML的转换。因此，当您尝试clone()引导选择元素，然后对其调用selectpicker()时，它试图强制引导转换未处于预期状态的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>

克隆的引导程序选择器选择关闭了1

1 个答案: