[FIXED] how to enable dropdown items after cloning

Issue

i'm cloning the select dropdown using jquery, after cloning the dropdown in the next div, the dropdown options are not enabled, the dropdown is kind of disabled, i'm posting my code below, any suggestions appeciated

<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>

this is the function that i'm using for cloning the select dropdown

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);
}

Solution

i'm using mdbootstrap select dropdown, so after cloning i have to apply materialSelect property to cloned dropdown, after applying the property it's working fine, below i'm posting the code

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);
    }

Answered By - How To Learn

Answer Checked By - Cary Denson (PHPFixing Admin)