Javascript not firing when changing HTMLDropDownListFor value

Question

I have this dropdown list.

 @Html.DropDownListFor(m => m.Puppies, Model.Puppy.PuppyList, new { @class = "dashboard-control",     placeholder = "Select Puppy" })

Markup:

<select class="dashboard-control" data-val="true" id="Puppies" name="Puppies" placeholder="Select Puppy"><option value="2">Lab</option>

Poodle

The name and id of this dropdown is Puppies, verified in Inspector.

I have this javascript in my View:

<script type="text/javascript">

    $(document).ready(function() {
        $("#Puppies").on("change", function() {

            var selected = $(this).val();
            $("#description").html("You selected: " + selected);

        })
    });
</script>

When I place a break in the Chrome Sources window on the function, it only stops there on page load. I don't see any obvious problems. According to the documentation I read for .on, it should fire when the value is changed. I even tabbed out of the combo to see if that was when it would fire. What am I missing?

what is the markup generated by the first snippet? – Todd Jan 07 '15 at 21:44 — Todd, Jan 07 '15 at 21:44

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

1

Not seeing where there's anything wrong with your code. this is essentially the same thing, and I've tested both ways.

edit

Now that you've made clearer the id you're using, you should escape the period in the jquery selector so that it doesn't mistake it for a class. code tested, works.

$(function() {
    $('#Animals\\.Puppies').on("change", function() {
        var selected = $(this).children(':selected').text();
        $("#description").html("You selected: " + selected);
     
    }).change();
});

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 07 '15 at 21:54

Todd

5,314
3
28
45

Same results. It breaks on load, but not when I change the dropdown. Is it illegal to have a period in my name/id? I have replaced it with Puppies in this example, but in my code its similar to Animals.Puppies. – andy Jan 07 '15 at 21:58
as in the `id` of the html element? that's what has the id of 'Animals.Puppies'? – Todd Jan 07 '15 at 22:06
yes, I think i have found the answer to that question here (it does seem legal) http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html which leaves me still scratching my head. – andy Jan 07 '15 at 22:11
yeah, I've never tried to use `.` in an id, but since jquery takes that to mean a class, you should try escaping it. i.e. `$('#Animals\\.Puppies')` – Todd Jan 07 '15 at 22:13
No luck. Even after escaping it. Does the fact it breaks on load indicate it's valid js and I haven't goofed something up like a } or )? – andy Jan 07 '15 at 22:20
that seems most likely, yeah, that it's something else going on. I broke it for a moment when testing the id with a period, which the escaping fixed. **what do mean by breaks on load, exactly?** – Todd Jan 07 '15 at 22:23
by break on load I mean it stops at the break point i place in the function when the page loads initially. – andy Jan 08 '15 at 00:54
oh, ok... well, that's a good thing, right? Have you learned anything helpful through debugging your code like this/ – Todd Jan 08 '15 at 02:12
No, because the on change doesn't fire on page load. It should be firing when I select a new value in the dropdown. – andy Jan 08 '15 at 02:14
keep your breakpoint where it is -- or thereabout -- add the above changes to handler. – Todd Jan 08 '15 at 02:19
No, still not firing. I added your edits and it still only stops on my breakpoint on initial page load. I have other js that runs on other views in my project and I have added this script the same way. – andy Jan 08 '15 at 14:33

score 0 · Answer 2 · answered Jan 07 '15 at 22:09

0

Try:

$("body").on("change", "#Puppies", function() 
{
    var selected = $(this).find(":selected").val();
});

answered Jan 07 '15 at 22:09

Anja

473
4
12

Have you tried it outside $(document).ready(function() {..} or $(function(){ ... })? – Anja Jan 07 '15 at 22:25
So what happens if you add within the body tag? Just ouf interest. – Anja Jan 08 '15 at 14:45
It still wont fire. I removed the $(document) and $(function). – andy Jan 08 '15 at 15:05

score 0 · Accepted Answer · edited May 23 '17 at 11:57

Ok, this is working now. In my attempt to obfuscate the model and id of the drop down, I manually typed the id #Animals.Puppies' in the demo code. Well, apparently HTML helpers, such as the one I was using @Html.DropDownListFor, change periods to underscores automatically in the id. Since I was placing a period in the function when referencing the ID, naturally it never fired on change of the drop down. There is a discussion about this and the code that does this, in this question Preventing ASP.NET MVC from Replacing period with underscore in Html Helper IDs

When I referenced the id of the dropdown correctly with the underscore, not a period, the script worked.

Javascript not firing when changing HTMLDropDownListFor value

3 Answers3

edit