Detect with JQuery when a select changes

Question

I have a Jqgrid which dynamically generates selects like this:

    <select id="won" style="width: 65px;">
       <option value="">-WON?</option>
       <option value="1" selected>Bet1</option>
       <option value="2" >Bet2</option>
       <option value="3" >Bet3</option>
    </select>

Each one have a different selected option. I would like to detect when one select changes so I can save it in my database.

I'm trying with:

         $('#won').change(function(){
               alert("PROBANDO");
          });

But is not working at all.

score 98 · Accepted Answer · answered Oct 22 '13 at 21:17

98

The problem is that the select are created dynamically, then you need to use .on()

try this:

         $(document).on('change','#won',function(){
               alert("PROBANDO");
          });

answered Oct 22 '13 at 21:17

Alessandro Minoccheri

35,521
22
122
171

How could I detect which won is changing? I should name them different? – user2876368 Oct 22 '13 at 21:21
usually inside html id are unique! is very important this rule. if you can create more select with different id like won1, won2. If you can't use classes like won1, won2 but I really advise you to have unique id inside your html @user2876368 – Alessandro Minoccheri Oct 22 '13 at 21:23
$(this).find("option:selected").attr('value') tells you the new "won value" if it is what you are looking for ... – Corinne Kubler Oct 22 '13 at 21:27
what are you talking about? OP ask which of the select are changed not the current selected option @CorinneKubler – Alessandro Minoccheri Oct 22 '13 at 21:28
I will :) How can I call this function with dinamically "wons" (won320, won896, won99) ?? var x = 0; $(document).on('change','#won'+x,function(){ alert("PROBANDO"); }); – user2876368 Oct 22 '13 at 21:32
you can do this: $(document).on('change','[id^="won"]',function(){ alert("PROBANDO"); }); or something similar, it would be that find changing of input that id starts with string "won" @user2876368 – Alessandro Minoccheri Oct 22 '13 at 21:35
oups so $(this) will give the select which changed isn't it ? – Corinne Kubler Oct 22 '13 at 21:36
I was stucked into this for hours... Thanks +1 – Laerte Apr 28 '15 at 15:09

score 37 · Answer 2 · edited Mar 09 '15 at 01:51

37

This should work, be sure you did not forget $(document).ready(function() {

$(document).ready(function() {  
    $('#won').change(function(){
        alert( $(this).find("option:selected").attr('value') );       
    });
 });

edited Mar 09 '15 at 01:51

yizzlez

8,757
4
29
44

answered Oct 22 '13 at 21:20

Corinne Kubler

2,072
5
22
34

Found this most usefull – Jimmy Obonyo Abor Dec 29 '15 at 22:46
1

this is waiting for the document to be ready, but if #won is generated dynamically this will fail. The correct answer is to listen for events at a stable, non generated html node, and check the event came from the correct child node, in this case the stable node is "document" and "#won" is the child. – Josiah Oct 30 '18 at 17:49

Detect with JQuery when a select changes

2 Answers2

Related