Javascript 选择性下拉列表不会在生成的行中打开

这是我第一次使用堆栈溢出，所以对于格式错误，我深表歉意

我正在生成行，用于在数据库中创建名为hazards的新对象，并用于下拉列表。以下是我对下拉列表的看法：

@if (Model != null && Model.Count > 0)
            {
                int j = 0;
                foreach (var i in Model)
                {
                    var hazard = i.hazardID;
                    <tr>
                        <td>
                            <div class="form-groupcol-md-12">
                                <label class="control-label col-md-2" for="hazardID">Hazard</label>
                                <div class="col-md-10">
                                    @Html.DropDownListFor(Model => Model[j].hazardID, hazardList, htmlAttributes: new { @class = "ddl ddlHazard" })           
                                    @Html.ValidationMessageFor(m => m[j].hazardID, "", new { @class = "text-danger" })
                                </div>
                            </div>

---

如果我试图强制它打开$this.selectivity'open'，控制台会告诉我，如果没有selectivity实例，它就不能调用元素上的方法。任何帮助都将不胜感激

To«实例化»表示创建类的实例。 我通常需要针对一个元素进行操作。。。元素，在本例中

在文档准备就绪时，您已经在原始选择上完成了此操作。 这就是创建所有具有选择性的元素的原因

现在克隆行并不同时克隆选择性实例。 您必须针对克隆的select再次执行此操作。 在执行此操作之前，最好从克隆中清除由前一个实例创建的元素

紧接着«var$trNew=$trLast.clone；，加：

注：此溶液未经测试。。。

---

;

To«实例化»表示创建类的实例。 我通常需要针对一个元素进行操作。。。元素，在本例中

在文档准备就绪时，您已经在原始选择上完成了此操作。 这就是创建所有具有选择性的元素的原因

现在克隆行并不同时克隆选择性实例。 您必须针对克隆的select再次执行此操作。 在执行此操作之前，最好从克隆中清除由前一个实例创建的元素

紧接着«var$trNew=$trLast.clone；，加：

注：此溶液未经测试。。。

---

;

你肯定在谈论。。。请展示如何在元素上安装它。。。你如何在克隆元素上实例化它因为是的。。。你必须这么做…你肯定在谈论。。。请展示如何在元素上安装它。。。你如何在克隆元素上实例化它因为是的。。。你必须这么做……谢谢你提供的信息，这很有效。谢谢你提供的信息，这很有效。

        $('body').on('click', '#addNew', function (e) {
            e.preventDefault();
            var $tableBody = $("#itemTable");
            var $trLast = $tableBody.find("tr:last");
            var $trNew = $trLast.clone();

            var suffix = $trNew.find(':input:first').attr('name').match(/\d+/);
            $trNew.find("td:last").html('<a href="#" class="remove glyphicon glyphicon-remove"></a>');
            $trLast.find("td:last").html('');
            $.each($trNew.find(':input'), function (i, val) {
                //replace name
                if (i != 1 && i!=4)
                {
                    var oldN = $(this).attr('name');
                    var type = $(this).attr('type');
                    if (type != "file") {
                        var newN = oldN.replace('[' + suffix + ']', '[' + (parseInt(suffix) + 1) + ']');
                        $(this).attr('name', newN);
                    }

                    if (type == "text") {
                        if (i != 6)
                            $(this).val("");
                    }
                    else if (type == "file") {
                        $(this).val("");
                    }

                    $(this).removeClass("input-validation-error");
                }

            });

            $.each($trNew.find('.text-danger'), function (i, val) {
                var oldD = $(this).attr('data-valmsg-for');
                var newD = oldD.replace('[' + suffix + ']', '[' + (parseInt(suffix) + 1) + ']');
                $(this).attr('data-valmsg-for', newD);
            });
            $trLast.after($trNew);

            //reassign validation
            var form = $("form")
                .removeData("validator")
                .removeData("unobtrusiveValidation");
            $.validator.unobtrusive.parse(form);
        });

<div class="form-groupcol-md-12">
<label class="control-label col-md-2" for="hazardID">Hazard</label>
<div class="col-md-10">
    <select class="ddl ddlHazard" data-val="true" data-val-number="The field Hazard must be a number." data-val-required="You must enter a hazard type" name="[0].hazardID" style="width: 100%; margin-bottom: 6px; display: none;">
        <option value="3">Chemical Storage</option>
        <option value="9">Eyewash</option>
        <option value="10">First Aid Kit</option>
        <option value="5">Flamming Storage</option>
        <option value="2">Food spill</option>
        <option value="4">Frayed Cords</option>
        <option value="7">Gaurding</option>
        <option value="1">Guard Missing</option>
        <option value="6">Housekeeping</option>
        <option value="11">Improper Wiring</option>
        <option value="8">Pinch Points</option>
        <option value="12">Other</option>
    </select>
    <div id="s9y_undefined" class="ddl ddlHazard selectivity-input" style="width:100%;margin-bottom:6px" data-name="[0].hazardID" tabindex="0">
        <div class="selectivity-single-select">
            <input class="selectivity-single-select-input" type="text">
            <div class="selectivity-single-result-container">
                <span class="selectivity-single-selected-item" data-item-id="3">
                    <a class="selectivity-single-selected-item-remove">
                        <i class="fa fa-remove"></i>
                    </a>Chemical Storage
                </span>
            </div>
            <i class="fa fa-sort-desc selectivity-caret"></i>
        </div>
    </div>           
<span class="field-validation-valid text-danger" data-valmsg-for="[0].hazardID" data-valmsg-replace="true"></span>
</div>

<div class="form-groupcol-md-12">   
<label class="control-label col-md-2" for="hazardID">Hazard</label>
<div class="col-md-10">
    <select class="ddl ddlHazard" data-val="true" data-val-number="The field Hazard must be a number." data-val-required="You must enter a hazard type" name="[1].hazardID" style="width: 100%; margin-bottom: 6px; display: none;">
        <option value="3">Chemical Storage</option>
        <option value="9">Eyewash</option>
        <option value="10">First Aid Kit</option>
        <option value="5">Flamming Storage</option>
        <option value="2">Food spill</option>
        <option value="4">Frayed Cords</option>
        <option value="7">Gaurding</option>
        <option value="1">Guard Missing</option>
        <option value="6">Housekeeping</option>
        <option value="11">Improper Wiring</option>
        <option value="8">Pinch Points</option>
        <option value="12">Other</option>
    </select>
    <div id="s9y_undefined" class="ddl ddlHazard selectivity-input" style="width:100%;margin-bottom:6px" data-name="[0].hazardID" tabindex="0">
        <div class="selectivity-single-select">
            <input class="selectivity-single-select-input" type="text">
                <div class="selectivity-single-result-container">
                    <span class="selectivity-single-selected-item" data-item-id="3">
                        <a class="selectivity-single-selected-item-remove">
                            <i class="fa fa-remove"></i>
                        </a>Chemical Storage
                    </span>
                </div>
                <i class="fa fa-sort-desc selectivity-caret"></i>
        </div>
    </div>           
    <span class="field-validation-valid text-danger" data-valmsg-for="[1].hazardID" data-valmsg-replace="true"></span>
</div>

    $(document).ready(function () {
    $(".ddl").each(function () {
        $(this).selectivity({
            allowClear: true
        });
    });
});

// Remove the elements injected by selectivity from the clone.
$trNew.find("[class^='selectivity-']").remove();

// Instanciate selectivity on the select.
$trNew.find(".ddl").selectivity({
  allowClear: true
});