to carry selected text and id value together of multiselect dropdown to other dropdown using jquery

Question

I have a multiselect dropdown. All of its selected text and values should be displayed as each entry on other dropdown. I coded somewhat like this but its not working. All the selections of multiselect dropdown are appending on a single entry of the other dropdown. It is not displaying as separate entries.

#LstCashAccount is the multiselect dropdown and #ddlDefaultCash is the dropdown where entries selected in multiselect dropdown have to get affected

$('#LstCashAccount').change(function () {

    $("#ddlDefaultCash").empty();
    $("#ddlLoyaltyAcc").empty();
    var CashAcc = "";
    var CashAccId = $("#LstCashAccount").val();
    CashAccIdSplit = CashAccId.splice(",")
    CashAcc = $(this).find("option:selected").text();
    CashAccSplit = CashAcc.split(".")

    $("#ddlDefaultCash").append('<option class="InputDefCash" Id=' + CashAccIdSplit + '>' + CashAccSplit + '</option>');

});

Answer 1

So there are multiple issues here.

First, it's important to realize that the .append() function is what's actually creating your items. You only call this once , so expecting there to be multiple items is, frankly, a bit silly.

Second, you're using .splice() on a string, which isn't valid. I have a hunch you meant to do .split() , but without your HTML markup, it's a bit of a shot in the dark.

And finally, your CashAccSplit variable is (and, I assume, your CashAccIdSplit is supposed to be) an array . If you just concatenate this with a string, it will output the entire array.

If we clean this up, you might be looking for something more like the following...

$('#LstCashAccount').change(function () {

    $("#ddlDefaultCash").empty();
    $("#ddlLoyaltyAcc").empty();

    var CashAcc = $(this).find("option:selected").text();
    var CashAccId = $("#LstCashAccount").val();

    var CashAccIdSplit = CashAccId.split(",")
    var CashAccSplit = CashAcc.split(".")

    //Use .each to iterate through the array, append each member as an item
    $.each(CashAccIdSplit, function(index, item) {
        $("#ddlDefaultCash").append('<option class="InputDefCash" Id=' + CashAccIdSplit[index] + '>' + CashAccSplit[index] + '</option>');
    });

});