onchange event for html.dropdownlist

Question

I am trying to trigger an action method for onchange event for dropdownlist, how can I do this without using jquery onchange.

@Html.DropDownList("Sortby", 
                   new SelectListItem[] 
                   { 
                       new SelectListItem() { Text = "Newest to Oldest", Value = "0" }, 
                       new SelectListItem() { Text = "Oldest to Newest", Value = "1" }})

Thanks

i want to call something like /Controller/Actionmethod?value=valueofthedropdownlist, would this work ?? — user3585193, Jul 31 '14 at 10:30
What is Sortby in your helper? Is it a label or something else? — Nabid, Nov 15 '18 at 11:53

Kartikeya Khosla · Answer 1 · 2019-08-27T06:50:33.943

69

If you don't want jquery then you can do it with javascript :-

@Html.DropDownList("Sortby", new SelectListItem[] 
{ 
     new SelectListItem() { Text = "Newest to Oldest", Value = "0" }, 
     new SelectListItem() { Text = "Oldest to Newest", Value = "1" }},
     new { @onchange="callChangefunc(this.value)" 
});

<script>
    function callChangefunc(val){
        window.location.href = "/Controller/ActionMethod?value=" + val;
    }
</script>

edited Aug 27 '19 at 06:50

answered Jul 31 '14 at 10:30

Kartikeya Khosla

18,495
8
42
66

I'm trying to get the text of that option, but when I write this.text, it doesn't seem to work. How can I get the text? – Burak Karakuş Dec 09 '14 at 08:33
2

@BurakKarakuş...for getting selected text...code will somewhat different...see the [fiddle](http://jsfiddle.net/vz2bdsbh/) – Kartikeya Khosla Dec 09 '14 at 08:43

score 39 · Accepted Answer · edited Feb 14 '17 at 20:55

39

You can do this

@Html.DropDownList("Sortby", new SelectListItem[] { new SelectListItem() 
  { 

       Text = "Newest to Oldest", Value = "0" }, new SelectListItem() { Text = "Oldest to Newest", Value = "1" } , new
       {
           onchange = @"form.submit();"
       }
})

edited Feb 14 '17 at 20:55

whyoz

5,008
44
52

answered Jul 31 '14 at 10:34

Moons

3,743
3
46
81

how to used @Html.DropDownListFor – Ghotekar Rahul Sep 24 '19 at 05:24

score 6 · Answer 3 · answered Jul 31 '14 at 10:44

6

You can try this if you are passing a value to the action method.

@Html.DropDownList("Sortby", new SelectListItem[] { new SelectListItem() { Text = "Newest to Oldest", Value = "0" }, new SelectListItem() { Text = "Oldest to Newest", Value = "1" }},new { onchange = "document.location.href = '/ControllerName/ActionName?id=' + this.options[this.selectedIndex].value;" })

Remove the query string in case of no parameter passing.

answered Jul 31 '14 at 10:44

The Godfather

835
10
16

is this.options[this.selectedIndex].value default? How the selected option value is being assigned into this.options[this.selectedIndex].value? – Nabid Nov 15 '18 at 11:48
1

@Nabid I'm quite not sure what you meant by default..it is plain javascript. 'this' points to the current html element; in the above case its – The Godfather Nov 15 '18 at 17:54
And what is Sortby? Is it the viewbag variable name or something else? – Nabid Nov 17 '18 at 03:45

score 1 · Answer 4 · edited Feb 05 '19 at 16:44

1

try this :

@Html.DropDownList("Sortby", new SelectListItem[] { new SelectListItem() 
{ Text = "Newest to Oldest", Value = "0" }, new SelectListItem() 
{ Text = "Oldest to Newest", Value = "1" }},
new { onchange = "document.location.href = '/ControllerName/ActionName?id=' + this.options[this.selectedIndex].value;" })

edited Feb 05 '19 at 16:44

Hasan

1,173
10
26

answered Feb 05 '19 at 16:10

Minguocode

11
1

Mahir Uslu · Answer 5 · 2021-07-29T09:07:10.250

1

first you need to give your dropdown onchange event;

@Html.DropDownList("ddl_reportId", new SelectList(ViewBag.ddl_reportName, "ddl_reportId", "ddl_reportName"), "Raporu seçin", new { @class = "form-control", @onchange = "getVal()" })

then in script section you have to call it like this.

function getVal() {
    var selectedVal = document.getElementById("ddl_reportId").value;
    console.log(selectedVal)};

edited Jul 29 '21 at 09:07

answered Jul 28 '21 at 07:43

Mahir Uslu

21
4

Please include code formatting for the @HTML.... section – mishsx Jul 28 '21 at 08:54

score 0 · Answer 6 · edited Feb 03 '17 at 03:03

If you have a list view you can do this:

Define a select list:

@{
   var Acciones = new SelectList(new[]
   {
  new SelectListItem { Text = "Modificar", Value = 
   Url.Action("Edit", "Countries")},
  new SelectListItem { Text = "Detallar", Value = 
  Url.Action("Details", "Countries") },
  new SelectListItem { Text = "Eliminar", Value = 
  Url.Action("Delete", "Countries") },
 }, "Value", "Text");
}

Use the defined SelectList, creating a diferent id for each record (remember that id of each element must be unique in a view), and finally call a javascript function for onchange event (include parameters in example url and record key):
```
@Html.DropDownList("ddAcciones", Acciones, "Acciones", new { id = 
item.CountryID, @onchange = "RealizarAccion(this.value ,id)" })
```

onchange function can be something as:

@section Scripts {
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>

<script type="text/javascript">

function RealizarAccion(accion, country)
{

    var url = accion + '/' + country;
    if (url != null && url != '') {
        window.location.href = url ;
    }
}
</script>

@Scripts.Render("~/bundles/jqueryval")
}

onchange event for html.dropdownlist

6 Answers6

Linked