时间戳

首页 > 解决方案 > 克隆的 bootstrap-selectpicker 选择关闭 1

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

问题描述

当我克隆一个引导选择下拉列表时，克隆的下拉列表似乎将选择偏移 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>

标签： javascriptjquerytwitter-bootstrapselectbootstrap-4

解决方案

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

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

这是您最初使用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>

推荐阅读