Here is my code:

$.each (t.config.industry, function (i, v) {
    $(v).change(function () {
        console.log("Industry change!");
    });
});

t.config.industry is an array of <select> ids. t.config.industry: ["#W2549_Sl", "#W2601_Sl", "#W2654_Sl"] I have several <select> boxes on the page and I'm tracking them all. Any time any of them change I want to fire something.

Obviously I'm trying to do more than simply console.log, but for the sake of this post I'll limit it to that. On my website the console.log only prints once, on the first change. On subsequent changes of the <select> dropdown menu it does not fire.

Anyone seen this before?

NOTE: I cannot change the HTML mark-up at all.

Here is my code:

$.each (t.config.industry, function (i, v) {
    $(v).change(function () {
        console.log("Industry change!");
    });
});

t.config.industry is an array of <select> ids. t.config.industry: ["#W2549_Sl", "#W2601_Sl", "#W2654_Sl"] I have several <select> boxes on the page and I'm tracking them all. Any time any of them change I want to fire something.

Obviously I'm trying to do more than simply console.log, but for the sake of this post I'll limit it to that. On my website the console.log only prints once, on the first change. On subsequent changes of the <select> dropdown menu it does not fire.

Anyone seen this before?

NOTE: I cannot change the HTML mark-up at all.

• javascript
• jquery
• html

• It is a little hard to decipher without seeing some markup, but you are containing the change in an each function. Each applies the function once for each element in the batch typically, I have never nestled a change function within an each. – Jay Blanchard Commented Mar 19, 2012 at 15:32
• The mark up is just a bunch of select boxes. But I can't change the mark-up. It's hard to explain, but I'm stuck with the mark-up. – Jesse Atkinson Commented Mar 19, 2012 at 15:46

6 Answers 6

I've witnessed this behavior when the ids of the multiple select elements weren't unique. To resolve the issue in my case, I simply removed the ids, defined a class, and modified the jQuery selector to use the specified class. For example:

    <select class="some_value" some_id="<%= some[:id] %>">

    $(".some_value").change(function() {
        var some_id = $(this).attr("some_id");
        alert('some_id: ' + some_id);
    });

Frankly I consider the behavior a bug in jQuery. Why should it work successfully once and fail thereafter?

If you could add a mon class to each of the select elements you want to monitor, that would simplify your code immensely. Try this (jQuery 1.7 required for the on method):

$(document).on('change','select.monitorme', function() {
    console.log($(this).attr('id')+' changed!');
});

$.each (t.config.industry, function (i, v) {
    $(v).change(function () {
        $(this).addClass('monitorme'); // or just add the class to your markup
    });
});

Try rewrite it in a such way HTML

        <select id="main_industry">
          <?foreach ($industry as $item ){?>
          <option value="<?=$item['id']?>"><?=$item['title']?></option>
          <?}?>
        </select>

JAVASCRIPT

   $('#main_industry').change(function() {
      // your stuff here
      console.log ($(this).val());
   }

You need to add the # before the v (your id) for this selector to work

$.each(t.config.industry, function (i, v) {
   $("#" + v).change(function () {
      console.log("Industry change!");
   });
});

For asp, it's working in my project correctly.

<asp:DropDownList ID="txtvisitname" AutoPostBack="true" class="txtno" AppendDataBoundItems="true" 
    runat="server" onchange="return selectChange()">
    <asp:ListItem Text="--SELECT--" Value="0" />
    <asp:ListItem Text="VISIT1" Value="VISIT1" />
    <asp:ListItem Text="VISIT2" Value="VISIT2" />
    <asp:ListItem Text="VISIT3" Value="VISIT3" />
    <asp:ListItem Text="VISIT4" Value="VISIT4" />
    <asp:ListItem Text="VISIT5" Value="VISIT5" />
    <asp:ListItem Text="Unscheduled  VISIT" Value="Unscheduled  VISIT" />
</asp:DropDownList>

Function:

selectChange() {
    if ($("[id*=txtvisitname]").val() == "Unscheduled  VISIT") {
        $(".other").show();
    } else {
        $(".other").hide();
    }
}

You're setting your listener on every option it seems. Put it on your select only !