select on change jquery not working

Question

I have the following code that does not seem to work:

$('.chosen-select').on('change', function() {
    if ('.chosen-select'.value == '1') {
        $("#tips").html("the color that you want to add.");
    } else if ('.chosen-select'.value == '2') {
        $("#tips").html("the text that you want to add.");
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="tips"></div>
<select class="chosen-select" style="width:290px;" name="option">
    <option value="1">change background colour</option>
    <option value="2">insert text</option>
    <option value="3">insert arrow</option>
</select>

My web browser console is not giving me any error. The code is suppose to change the html of the div based on changing the select option value.

Hi, Try to load the page first and then call the jQuery by using $(document).ready(function() { PLACE YOUR CODE HERE }); — M3ghana, Apr 20 '15 at 03:46
`if ( '.chosen-select'.value` is not doing what you probably think it is doing. The change handler is executing, but the code in it isn't correct. Try `if ( $(this).val() == '1')`, for starters... — Chris Baker, Apr 20 '15 at 03:46

j08691 · Accepted Answer · 2015-04-20T03:49:07.643

5

This '.chosen-select'.value won't work as it's neither a valid jQuery expression nor JavaScript. Instead use $('.chosen-select').val(), this.value or $(this).val().

jsFiddle example

edited Apr 20 '15 at 03:49

answered Apr 20 '15 at 03:46

j08691

204,283
31
260
272

@Ja͢ck - sure, `this.value` or even `$(this).val()`. All three work. – j08691 Apr 20 '15 at 03:48
All three work in this particular instance, but it will yield different results if there are multiple elements with the same class name. – Ja͢ck Apr 20 '15 at 03:49
@Ja͢ck - right, but for this simple example, all three will work. If there are multiple selects with the same class, then only `this.value` or `$(this).val()` should be used. – j08691 Apr 20 '15 at 03:50

Tamil Selvan C · Answer 2 · 2015-04-20T03:47:42.437

Use if($(this).val() == '1') { not as if('.chosen-select'.value == '1')

   $(function() {
  $('.chosen-select').on('change', function() {
    if($(this).val() == '1') {$("#tips").html( "the color that you want to add.");}
    else if($(this).val() == '2') {$("#tips").html( "the text that you want to add.");}
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="tips"></div>
<select class="chosen-select" style="width:290px;" name="option">
<option value="1">change background colour</option>
<option value="2">insert text</option>
<option value="3">insert arrow</option>
</select>

score 0 · Answer 3 · answered Apr 20 '15 at 03:55

The below expression doesn't yield the results you want:

'.chosen-select'.value

It attempts to access the value property of a String object, which is undefined, because strings don't have such properties.

Within the change event handler function, you can make good use of the fact that this references the <select> element:

var selectedValue = this.value; // get value from select element

Alternatively, use jQuery's .val() function to get the value:

var selectedValue = $(this).val();

select on change jquery not working

3 Answers3

Linked