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: dotnetfiddle.net/1bPZym. — Tetsuya Yamamoto
– Tetsuya Yamamoto, Commented Sep 27, 2018 at 4: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); }); — user3559349
– user3559349, Commented Sep 27, 2018 at 4: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
– akkapolk, Commented Sep 27, 2018 at 7:31

Tetsuya Yamamoto · Accepted Answer · 2018-09-27 07:46:59Z

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related