Question

我在项目中使用Bootstrap select，但是有一个问题，那就是在表单中，用户可以生成诸如<select>之类的新元素。

使用添加新选择并选择其项目时，它不会显示为选择中的选定项目。

注意：它对于我的表单中的静态select标签正常工作。

我生成这样的新元素：

$(".newrow").on('click', function () {

    debugger;
    var index = (new Date()).getTime(); // unique indexer
    var baseTable = $(this).closest(".added").siblings(".table")
    var clone = $(baseTable).find(".template").clone();
    clone.html($(clone).html().replace(/\[#\]/g, '[' + index + ']'));
    clone.html($(clone).html().replace(/"%"/g, '"' + index + '"'));
    $(baseTable).find("tbody tr:last").after('<tr>' + clone.html() + '</tr>');
});

我的模板是这样的：

   <tr class="template"> </td>
                <td>
                    <div class="form-group level3">
                        <select class="selectpicker  form-control" data-live-search="true"  name="Education[#].EducationCenterId">
                            <option value="0">choose an item</option>
                            <option>some other options here </option>
                        </select>
                    </div>
                </td></tr>

Answer 1

包括boostrap.js和CSS。

HTML

    <table class="table">
        <tbody>
        <tr class="template"> 
            <td>
                <div class="form-group level3">
                <select class="selectpicker  form-control" data-live-search="true"  name="Education[#].EducationCenterId">
                    <option value="0">choose an item</option>
                    <option value="test">some other options here </option>
                </select>
                </div>
            </td>
        </tr>
        </tbody>
            </table>
             <button class="newrow" value="New row">New</button>

             </button>

Js

$(document).ready(function(){

    $(".newrow").on('click', function () {
        var index = (new Date()).getTime(); // unique indexer
        var baseTable = $(".table")
        var clone = $(baseTable).find(".template select").clone();
        $(baseTable).find("tbody tr:last").after('<tr><td><select class="selectpicker  form-control" data-live-search="true"  name="Education[#].EducationCenterId">' + clone.html() + '</select></td></tr>');
        $('.selectpicker').selectpicker();
    });

    $('.selectpicker').selectpicker();
});

Working fiddle link

自定义插件不适用于动态生成的选择

1 个答案: