jquery - 克隆后如何启用下拉项

Question

我正在使用 jquery 克隆选择下拉列表，在下一个 div 中克隆下拉列表后，下拉选项未启用，下拉列表被禁用，我在下面发布我的代码，有任何建议

<div id="dvlstBusinessUnitAndRoles">
    <div class="row mt-5" id="dvRegion1">
        <div class="col-xl-3">
            <select class="mdb-select md-form colorful-select dropdown-primary" name="ddlProjectRegion" id="ddlProjectRegion1">
                <option value="" disabled selected>Select Region(s)</option>
            </select>
            <label>Select Region(s)</label>
        </div>
        <div class="col-xl-3">
            <select class="mdb-select md-form colorful-select dropdown-primary" name="ddlRoles" id="ddlRoles1">
                <option value="" disabled selected>Select Role(s)  </option>
            </select>
            <label>Select Role(s)</label>
        </div>
        <div class="col-xl-3">
            <div class="pt-4">
                <input type="checkbox" class="form-check-input" id="limitaccess">
                <label class="form-check-label" for="limitaccess">  Primary Region </label>
                <a href="#" id="hrefRegion" onclick="AddNewRow();" class="note"> <img id="imgNewRow" src="~/Content/images/plus-g.png" /></a>
            </div>
        </div>
    </div>
</div>

这是我用来克隆选择下拉菜单的功能

function AddNewRow() {
    var imgSource = '/Content/images/cross-g.png';
    var count = $("div [id^='dvRegion']").length + 1;
    var newId = 'dvRegion' + count;
    var newddlRegionId = 'ddlProjectRegion' + count;
    var newddlRoleId = 'ddlRoles' + count;
    var chkId = 'limitaccess' + count;
    $('<div/>', {
        id: newId,
        class: 'row mt-5'
    }).appendTo('#dvlstBusinessUnitAndRoles');
    $('#dvlstBusinessUnitAndRoles').children().last().replaceWith($("#dvRegion1").clone(true));
    $('#dvlstBusinessUnitAndRoles').children().last().attr('id', newId);
    $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find('a').attr('onclick', 'DeleteRow("' + newId + '")');
    $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find('input[type=text],select').attr('data-activates', newddlRegionId);
    $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find('[name="ddlProjectRegion"]').attr('id', newddlRegionId);
    $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find('[name="ddlProjectRegion"]').attr('name', newddlRegionId);
    $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find('[name="ddlRoles"]').attr('id', newddlRoleId);
    $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find('[name="ddlRoles"]').attr('name', newddlRoleId);
    $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find(('li')).parent().attr('id', newddlRegionId);
    $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find("#imgNewRow").attr("src", imgSource);
    $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find("#imgNewRow").attr("id", 'imgDelete');
    $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find('#limitaccess').attr('id', chkId);
    $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find('.form-check-label').attr('for', chkId);
    $("html, body").animate({ scrollTop: $(document).height() }, 1000);
}

标签： jquerymdbootstrap

Answer 1

我正在使用 mdbootstrap 选择下拉列表，所以在克隆后我必须将 materialSelect 属性应用于克隆的下拉列表，在应用属性后它工作正常，下面我发布代码

function AddNewRow() {
        var imgSource = '/Content/images/cross-g.png';
        var count = $("div [id^='dvRegion']").length + 1;
        var newId = 'dvRegion' + count;
        var newddlRegionId = 'ddlProjectRegion' + count;
        var newddlRoleId = 'ddlRoles' + count;
        var chkId = 'limitaccess' + count;
        $('<div/>', {
            id: newId,
            class: 'row mt-5'
        }).appendTo('#dvlstBusinessUnitAndRoles');
        $('#dvlstBusinessUnitAndRoles').children().last().replaceWith($("#dvRegion1").clone(true));
        $('#dvlstBusinessUnitAndRoles').children().last().attr('id', newId);
        $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find('a').attr('onclick', 'DeleteRow("' + newId + '")');
        $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find('input[type=text],select').attr('data-activates', newddlRegionId);
        $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find('[name="ddlProjectRegion"]').attr('id', newddlRegionId);
        $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find('[name="ddlProjectRegion"]').attr('name', newddlRegionId);
        $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find('[name="ddlRoles"]').attr('id', newddlRoleId);
        $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find('[name="ddlRoles"]').attr('name', newddlRoleId);
        $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find(('li')).parent().attr('id', newddlRegionId);
        $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find("#imgNewRow").attr("src", imgSource);
        $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find("#imgNewRow").attr("id", 'imgDelete');
        $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find('#limitaccess1').attr('id', chkId);
        $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find('.form-check-label').attr('for', chkId);
        $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find('.mdb-select').materialSelect('destroy');
        $('#dvlstBusinessUnitAndRoles').children().eq(count - 1).find('.mdb-select').materialSelect();
        $('#dvRegion1').find('.mdb-select').materialSelect('destroy');
        $('#dvRegion1').find('.mdb-select').materialSelect();
        $("html, body").animate({ scrollTop: $(document).height() }, 1000);
    }