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 http://jsfiddle.net. — Rory McCrossan, Jan 29 '15 at 11:43
Find your answer here http://stackoverflow.com/questions/11179406/jquery-get-value-of-select-onchange — Huzoor Bux, Jan 29 '15 at 11:45
Adding an identifier to the select itself and binding the onchange to that works fine. Can't explain why though — atmd, Jan 29 '15 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, Jan 29 '15 at 11:46
@adeneo ".single_variation" is the place where i want to show the value — deemi-D-nadeem, Jan 29 '15 at 11:48
I've created a [fiddle](http://jsfiddle.net/5capd4sh/) The code you have works for me. is this possibly a browser issues/jquery bug? im on firefox 36 beta — atmd, Jan 29 '15 at 11:51
Please show your *entire page* as something is missing from the puzzle here :) — iCollect.it Ltd, Jan 29 '15 at 12:05
Can you add a **jsfiddle** demo please ? What browser(s) are you using ? What is the code for `.single_variation` element ? Does this element can be updated by another part of your code ? What do you mean by `it did not work` ? What is the **exact behavior** you want, and what is the **exact behavior** you get ? Do you have another `change` event listerner elsewhere in your code ? Do this listener use either `stopPropagation`, `stopImmediatePropagation` or `return false;` ? It looks like the source of your problem is not present in the code you've provided right now, so we need more info ! :) — pomeh, Jan 29 '15 at 12:07

score 3 · Accepted Answer · answered Jan 29 '15 at 14:00

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 :)

thanx alot bro you save my life and my day ..... i make some changes in your code and its work perfectly — deemi-D-nadeem, Jan 30 '15 at 07:12

Manoj · Answer 2 · 2015-01-29T11:51:36.577

2

Try this

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

edited Jan 29 '15 at 11:51

answered Jan 29 '15 at 11:44

Manoj

4,951
2
30
56

3

This should make no difference (aside from slowing the selector down a tad). The original code *should* work. – iCollect.it Ltd Jan 29 '15 at 11:46
Also note: you switched to using `$` partway through. You have to be consistent with the OPs usage of jQuery. – iCollect.it Ltd Jan 29 '15 at 14:03

Sadikhasan · Answer 3 · 2015-01-29T12:14:19.380

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 '15 at 12:14

answered Jan 29 '15 at 11:52

Sadikhasan

18,365
21
80
122

@TrueBlueAussie I checked it it will return whole text – Sadikhasan Jan 29 '15 at 12:05
Sorry I meant: What's wrong with `jQuery(this).val()` :) – iCollect.it Ltd Jan 29 '15 at 12:06

score 1 · Answer 4 · answered Jan 29 '15 at 11:49

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 '15 at 11:49

sanjeev shetty

438
4
17

the issue is the change event not firing, not the alert – atmd Jan 29 '15 at 11:52

score 1 · Answer 5 · answered Jan 29 '15 at 11:53

1

JSFiddle Example

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

answered Jan 29 '15 at 11:53

Linesofcode

5,327
13
62
116

Please add any relevant changed code in your answer – iCollect.it Ltd Jan 29 '15 at 12:03

Hoja · Answer 6 · 2015-01-29T12:14:08.780

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 '15 at 12:14

answered Jan 29 '15 at 12:07

Hoja

1,057
1
12
32

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 Jan 29 '15 at 13:53
Secondly, the original code works too, so the problem lays somewhere not yet discovered :) – iCollect.it Ltd Jan 29 '15 at 13:55

Issue on change jquery function

6 Answers6

You could try like this