How to select data for @Html.DropDownListFor (selectpicker class) when @Html.DropDownList is updated, by jQuery?

Question

I'm developing web application by ASP.NET-MVC.

Model:

public partial class MyModel
{
    public string TEST { get; set; }
}

Html:

@model IList<MyModel>
@Html.DropDownList("dropDownListSelectToAnotherDropDownList", (SelectList)ViewBag.testList[0], null, new { id = "dropDownListSelectToAnotherDropDownList", title = "[--Select to all--]", @class = "selectpicker form-control", data_style = "btn btn-default", data_width = "100%", data_live_search = "true", data_size = "9" })
@for (var i = 0; i < Model.Count; i++)
{
    @Html.DropDownListFor(m => Model[i].TEST, (SelectList)ViewBag.testList[i], null, new { id = "dropDownListTest" + i, title = "[--Select Test--]", @class = "selectpicker form-control", data_style = "btn btn-default", data_width = "100%", data_live_search = "true", data_size = "9" })

}

jQuery:

$('#dropDownListSelectToAnotherDropDownList').on('keyup change', function () {
    @for (var i = 0; i < Model.Count; i++)
    {
        $('dropDownListTest' + i).val($(this).val());
        //$('dropDownListTest' + i).selectpicker('val', $(this).val());
    }
});

As the code above, I will get dropDownListSelectToAnotherDropDownList and many dropDownListTest (For example: dropDownListTest0, dropDownListTest1, ..., dropDownListTestN) that depends on count of model. I want to create event when dropDownListSelectToAnotherDropDownList is change. The event will get data from dropDownListSelectToAnotherDropDownList and then set to all dropDownListTest. But it's not work. Could someone help to suggested me, please?

Are you want to create cascading `DropDownList`? This fiddle from Stephen may be a good start: https://dotnetfiddle.net/1bPZym. — Tetsuya Yamamoto, Sep 27 '18 at 04:16
`@for (var i = 0; i < Model.Count; i++)` is razor code and is executed on the server before its sent to the view. Get rid of those `id` attributes and use a class name for the selector = `var selected = $(this).val(); $.each('.selectpicker', function() { $(this).val(selected); });` — , Sep 27 '18 at 04:19
@TetsuyaYamamoto, yes and I already created the dropdown. I want to create event when dropdown is change by jquery. The event will get data from the dropdown and then set to another dropdown. — akkapolk, Sep 27 '18 at 07:31

score 1 · Accepted Answer · answered Sep 27 '18 at 07:46

First, you should remove all id definitions and use separate class name for <select> elements created by DropDownListFor inside the loop, e.g. dropDownListTest:

@for (var i = 0; i < Model.Count; i++)
{
    @Html.DropDownListFor(m => Model[i].TEST, (SelectList)ViewBag.testList[i], null, new { title = "[--Select Test--]", 
                          @class = "selectpicker form-control dropDownListTest", ... })
}

Then, use jQuery.each() method to populate them with selected value from <select> element with id="dropDownListSelectToAnotherDropDownList". Both examples below should have the same result:

// example 1
$('#dropDownListSelectToAnotherDropDownList').on('keyup change', function () {
    val selectedValue = $(this).val();

    $('.dropDownListTest').each(function () {
        $(this).val(selectedValue);
    })
});

// example 2
$('#dropDownListSelectToAnotherDropDownList').on('keyup change', function () {
    val selectedValue = $(this).val();

    $.each($('.dropDownListTest'), function () {
        $(this).val(selectedValue);
    })
});

How to select data for @Html.DropDownListFor (selectpicker class) when @Html.DropDownList is updated, by jQuery?

1 Answers1