Javascript change event for html.dropdownlist

Question

I am beginner on javascript.

I try to use Html.Dropdownlist in Asp.net Mvc.

I have 1 dropdownlist and other 4 dropdownlists.

If 1.dropdownlist change value , i want to apply 1.dropdownlist value for 4 dropdownlists by using foreach in javascript.

Html:

@Html.DropDownList("MainDropDownList", listItems, "Select", new { @id = "MainDropDownListID" }) 

// İf this dropdownlist value changes , i want to apply value to other dropdownlists.

<table>
    <tr>
        <td>@Html.DropDownList("MyDropDownList1", listItems)</td>
        <td>@Html.DropDownList("MyDropDownList2", listItems)</td>
        <td>@Html.DropDownList("MyDropDownList3", listItems)</td>
        <td>@Html.DropDownList("MyDropDownList4", listItems)</td>
    </tr>
</table>

Javascript:

  $(function () {
        $('select#MainDropDownListID').change(function () {
            var SelectedValue = $(this).val();

         //How can i apply selectedvalue to 4 dropdownlists value using foreach ?

        });
    });

David · Accepted Answer · 2014-03-20 13:06:29Z

3

jQuery's .val() function can also be used to set a value by supplying the value as an argument:

$('#MainDropDownListID').change(function () {
    var SelectedValue = $(this).val();
    $('table select').val(SelectedValue);
});

answered Mar 20, 2014 at 13:06

David

221k42 gold badges245 silver badges337 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3409638 Over a year ago

i will accept your code as the best answer.Thanks for help.I would like to learn one more something. If my table id is "MyTableID" , how would code be . How can i use table id in stead of "table select" ?

David Over a year ago

@user3409638: You can specify the id in the selector as well, such as #MyTableID select. Separating selector elements by a space simply means that the latter elements are descendants of the former elements.

mplungjan · Accepted Answer · 2014-03-20 13:05:00Z

1

Firstly you would need to access the dropdown correctly - #MainDropDownListID for ID

Then just set the value

$(function () {
    $('#MainDropDownListID').change(function () {
        var SelectedValue = $(this).val();
        $('#MainDropDownList1").val(SelectedValue);
        $('#MainDropDownList2").val(SelectedValue);
        $('#MainDropDownList3").val(SelectedValue);
        $('#MainDropDownList4").val(SelectedValue);
    });
});

or in one go

$('select[id^"MainDropDownList"]').val(SelectedValue);

Or using each:

$("table").find('select[id^"MainDropDownList"]').each(function() { 
 $(this).val(SelectedValue);
});

answered Mar 20, 2014 at 13:05

mplungjan

180k29 gold badges183 silver badges246 bronze badges

1 Comment

user3409638 Over a year ago

how can i do this by using foreach ? i do not want to set one by one.

Sai Avinash · Accepted Answer · 2014-03-20 13:07:31Z

0

Assign an unique id to each dropdown and do as below:

<td>@Html.DropDownList("MyDropDownList1", listItems,new {id="ddl1"})</td>

     $("#ddl").change(function()
    {
       var SelectedValue = $(this).val();

    });

answered Mar 20, 2014 at 13:07

Sai Avinash

4,75118 gold badges63 silver badges100 bronze badges

Collectives™ on Stack Overflow

Javascript change event for html.dropdownlist

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related