Issue on change jquery function

Question

I am facing very weird issue. I have a dropdown option

<table class="variations">
   <tr>
      <td>
          <select name="up_options">
             <option value="" selected>Select Value</option>
             <option value="a">A</option>
             <option value="b">B</option>
             <option value="c">C</option>
             <option value="d">D</option>
             <option value="e">E</option>
          </select>
      </td>
   </tr>
</table>

and make a jquery function that alerts me the selected value but it did not work.

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery('.variations select').change(function(){
           alert(jQuery('.single_variation').text());
        });
    });
</script>

But when i edit the change to click it works perfectly (perfectly means it works only on click) when i click on select it gives me alert ... But when i change again it to change its not work.

I also try this

<script type="text/javascript">
    jQuery(document).ready(function(e) {
        jQuery('.variations select').on('change', function(){
           alert(jQuery('.single_variation').text());
        });
    });
</script>

But it also not work.

Please help me i am very confuse about it

Theres nothing here that should not be working. Can you provide a working example of the problem in jsfiddle.net. — Rory McCrossan
– Rory McCrossan, Commented Jan 29, 2015 at 11:43
Find your answer here stackoverflow.com/questions/11179406/… — Huzoor Bux
– Huzoor Bux, Commented Jan 29, 2015 at 11:45
Adding an identifier to the select itself and binding the onchange to that works fine. Can't explain why though — atmd
– atmd, Commented Jan 29, 2015 at 11:46
@HuzoorBux OP wants to get the value of a different element, not the select, and besides what they have should work fine as it is. — Rory McCrossan
– Rory McCrossan, Commented Jan 29, 2015 at 11:46

iCollect.it Ltd · Accepted Answer · 2015-01-29 14:00:48Z

3

There is nothing "wrong" with the original code, but you can make the following improvements:

   // Shortcut for DOM ready with locally scoped $
   jQuery(function($) {

        // Delegated event handler attached to a common ancestor
        $('.variations').on('change','select',function(){

            // this is the select itself, so use its val()
           var currentSelectVal = $(this).val();

           // Do something with the selection
           $('.single_variation').text(currentSelectVal);
        });
    });

JSFiddle: http://jsfiddle.net/TrueBlueAussie/z9ev6rrp/2/

Note: I look forward to seeing the rest of the page & code in order to determine where your actual problem lies :)

answered Jan 29, 2015 at 14:00

iCollect.it Ltd

93.9k26 gold badges189 silver badges210 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

deemi-D-nadeem Over a year ago

thanx alot bro you save my life and my day ..... i make some changes in your code and its work perfectly

Manoj · Accepted Answer · 2015-01-29 11:51:36Z

2

Try this

 jQuery('select[name="up_options"]').change(function(){
      jQuery('.single_variation').text( $(this).val());
      alert(jQuery('.single_variation').text());
  });

edited Jan 29, 2015 at 11:51

answered Jan 29, 2015 at 11:44

Manoj

5,0913 gold badges34 silver badges59 bronze badges

2 Comments

iCollect.it Ltd Over a year ago

This should make no difference (aside from slowing the selector down a tad). The original code should work.

iCollect.it Ltd Over a year ago

Also note: you switched to using $ partway through. You have to be consistent with the OPs usage of jQuery.

Sadikhasan · Accepted Answer · 2015-01-29 12:14:19Z

2

jQuery(document).ready(function() {
        jQuery('.variations select').change(function(){
        $(".single_variation").text((jQuery('.variations select option:selected').text()));    
        });
    });

OR

$(".single_variation").text($(this).val().toUpperCase());

Demo

edited Jan 29, 2015 at 12:14

answered Jan 29, 2015 at 11:52

Sadikhasan

18.6k23 gold badges84 silver badges126 bronze badges

2 Comments

Sadikhasan Over a year ago

@TrueBlueAussie I checked it it will return whole text

iCollect.it Ltd Over a year ago

Sorry I meant: What's wrong with jQuery(this).val() :)

sanjeev shetty · Accepted Answer · 2015-01-29 11:49:38Z

1

jQuery is really good with current element as $(this) or jQuery(this), so use like,

alert(jQuery(this).text()); // to alert the content of the selected item

alert(jQuery(this).val()); // to alert the value of the selected item

answered Jan 29, 2015 at 11:49

sanjeev shetty

4584 silver badges17 bronze badges

1 Comment

atmd Over a year ago

the issue is the change event not firing, not the alert

Linesofcode · Accepted Answer · 2015-01-29 11:53:49Z

1

JSFiddle Example

The event is getting fired and the result is being displayed according to the select option.

answered Jan 29, 2015 at 11:53

Linesofcode

6,02114 gold badges72 silver badges132 bronze badges

1 Comment

iCollect.it Ltd Over a year ago

Please add any relevant changed code in your answer

Hoja · Accepted Answer · 2015-01-29 12:14:08Z

1

You could try like this

 jQuery(document).ready(function() {
        jQuery('body').on('change','.variations select[name="up_options"]',function(){
           alert(jQuery('.single_variation').text());
           alert(jQuery
(this).val()); //Current Drowndown value
        });
    });

Binding events using delegate is appropriate and best practice.

Fiddle Here

edited Jan 29, 2015 at 12:14

answered Jan 29, 2015 at 12:07

Hoja

1,2371 gold badge14 silver badges36 bronze badges

2 Comments

iCollect.it Ltd Over a year ago

Binding delegated events to body is not recommended as it has a bug related to styling (it does not get some events if the computed height is 0 due to styling). Use document instead as the default if nothing else is closer (in your example using jQuery('.variations').on('change','select', function(){ makes more sense and is more efficient.

iCollect.it Ltd Over a year ago

Secondly, the original code works too, so the problem lays somewhere not yet discovered :)

Collectives™ on Stack Overflow

Issue on change jquery function

6 Answers 6

1 Comment

2 Comments

2 Comments

1 Comment

1 Comment

You could try like this

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

2 Comments

2 Comments

1 Comment

1 Comment

You could try like this

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related