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

Reinaldo

You want to call a Controller on change?? – Veery

i want to call something like /Controller/Actionmethod?value=valueofthedropdownlist, would this work ?? – Reinaldo

What is Sortby in your helper? Is it a label or something else? – Swithbert

Answer 1

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

Veery

how to used @Html.DropDownListFor – Steamer

Answer 2

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>

Mesh

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? – Ballinger

@BurakKarakuş...for getting selected text...code will somewhat different...see the fiddle – Mesh

Answer 3

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.

Teniacide

is this.options[this.selectedIndex].value default? How the selected option value is being assigned into this.options[this.selectedIndex].value? – Swithbert

@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 <select> control. and 'options' wil giv u d array of available values within d dropdownlist and selectedIndex is the JS property which returns the index of the selected value in dropdown.. every time you change the selected value in the drop down, browser changes the selectedIndex too.. check these links.. w3schools.com/jsref/prop_option_index.asp w3schools.com/jsref/prop_select_selectedindex.asp – Teniacide

And what is Sortby? Is it the viewbag variable name or something else? – Swithbert

Answer 4

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

Cini

Answer 5

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

Shirleenshirlene

Please include code formatting for the @HTML.... section – Flavin

Answer 6

If you have a list view you can do this:

1. 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");
   }
   

2. 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)" })
   

3. 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")
   }
   

Horta

Answer 7

Try the below if you want to call Javascript function on change event: @Html.DropDownList("ProjectId", Model.Projects, "Select Project", new Dictionary<string, object> { { "class", "select2" }, { "onchange", "onProjectSelect()" } })

function onProjectSelect() {
    //write your business logic..
}

Linares

Welcome to SO! Please don't post code-only answers but add a little textual explanation about how and why your approach works and what makes it different from the other answers given. You can find out more at our "How to write a good answer" page. Also, please edit your answer and use the formatting possibilities we provide in order to make it more readable. – Ammoniac