Fire event on change of value in dropdownlist

Question

I have a drop down in my page. on change of value in that drop down one event has to be fired.

HTML/Razor

@Html.DropDownList("Reason", new[] { new SelectListItem { Text="-Select-", Value= "-Select-",Selected=true }, new SelectListItem { Text="Price", Value= "Price" }, new SelectListItem { Text="3P", Value= "3P" }, new SelectListItem { Text="Freight Collect", Value= "Freight Collect" }, new SelectListItem { Text="Change in Relationships", Value= "Change in Relationships" }, }

I have tried the following code but the event is not getting fired.

$('#Reason').change(function () { alert($("#Reason").val()); UpdateRecords(); }); i am using following code — veena, Jul 23 '13 at 09:00
is the element #reason added dynamically ?i.e is it added after the jquery function is called?? — Bhadra, Jul 23 '13 at 09:03
check the console for any errors. Also encase your code inside `$(function() { // your code });` — Sushanth --, Jul 23 '13 at 09:03
@veena edit your question and put relevant code there, not in comments... — A. Wolff, Jul 23 '13 at 09:06
possible duplicate of [Handling onchange event in HTML.DropDownList Razor MVC](http://stackoverflow.com/questions/8973037/handling-onchange-event-in-html-dropdownlist-razor-mvc) — Imad Alazani, Jul 23 '13 at 09:13
@veena: Please post your code in your original post as it is better to read there, and please indent your code properly for readability purposes. — Brendan Vogt, Jul 23 '13 at 10:48
@veena: You also didn't show enough code of what is working. Please remember to give as much code and details of what you have tried and what did not work. — Brendan Vogt, Jul 23 '13 at 10:50

score 1 · Answer 1 · edited Jul 23 '13 at 09:13

1

You need to bind the event handler when the document is ready, so you use $(function () {});:

$(function () {
    $("#Reason").on("change", function () { 
        // You're referring to the object itself, so you can use $(this).
        alert(this.value); 
        UpdateRecords(); 
    });
});

edited Jul 23 '13 at 09:13

iConnor

19,997
14
62
97

answered Jul 23 '13 at 09:04

emerson.marini

9,331
2
29
46

**+1** If you explain what and why. – iConnor Jul 23 '13 at 09:06
it is not going inside the function itself – veena Jul 23 '13 at 09:12
1

You are missing parenthensis here `$(this.val()` and `this.value` is enough for `select` – A. Wolff Jul 23 '13 at 09:12
1

You can use `$(this).val();` or `this.value` <= this is cross browser so no need to use jQuery. :) – iConnor Jul 23 '13 at 09:16

score 0 · Answer 2 · answered Jul 23 '13 at 09:19

This is once again a problem with #Reason not actually existing in the DOM when you try to attach the event Listener. You need to make sure the DOM is ready before you do this..

With either

$(document).ready(function() {
   // Code here..
});

$(function(){
   // Code here...
});

They are both the same

score 0 · Answer 3 · answered Jul 23 '13 at 10:47

I tried to replicate your code to try and get your solution working. Below is what I came up with and it is tested. Please edit to fit in with your scenario.

I have indented your drop down markup for readability purposes:

@Html.DropDownList("Reason",
     new[]
     {
          new SelectListItem { Text="-Select-", Value= "-Select-", Selected = true },
          new SelectListItem { Text="Price", Value= "Price" },
          new SelectListItem { Text="3P", Value= "3P" },
          new SelectListItem { Text="Freight Collect", Value= "Freight Collect" },
          new SelectListItem { Text="Change in Relationships", Value= "Change in Relationships" }
     }
)

And the resulting output looks like this:

<select id="Reason" name="Reason">
     <option selected="selected" value="-Select-">-Select-</option>
     <option value="Price">Price</option>
     <option value="3P">3P</option>
     <option value="Freight Collect">Freight Collect</option>
     <option value="Change in Relationships">Change in Relationships</option>
</select>

In order for an event to trigger you need to add a listener to your drop down. In jQuery this is very easy to subscribe to the on change event.

And your jQuery would look like this:

<script>
     $(document).ready(function () {
          $('#Reason').change(function () {
               alert('select value has changed to ' + $('#Reason').val());

               UpdateRecords();
          });
     });
</script>

I hope this helps.

score -1 · Answer 4 · edited Jul 23 '13 at 09:06

-1

Try below code

$('#Reason').change(function () {

$("#yourdropdownid option:selected").text();

or

$("#yourdropdownid option:selected").val();

});

edited Jul 23 '13 at 09:06

iConnor

19,997
14
62
97

answered Jul 23 '13 at 09:05

selva

18
6

Did you tried like this $('#Reason').change(function () { $("#Reason option:selected").text(); }); @veena – selva Jul 23 '13 at 09:15
@selva do you know what a `` block is? I think you mean a ` – iConnor Jul 23 '13 at 09:25

Fire event on change of value in dropdownlist

4 Answers4