CODEWITHSUNDEEP
javascriptjqueryhtmldrop-down-menu
Conserta
Conserta

Reputation: 99

How do I show a message for a specific dropdown selection using javascript?

I would like to show a message when someone makes a specific selection from an HTML dropdown list. I have this so far:

<select name="configoption[56]" onchange="recalctotals()">
<option value="235"">USA</option>
<option value="206">Europe</option>
</select>

<span class="message">You selected USA!</span>

And the script:

$(document).ready(function() {
    $('#configoption[56]').change(function() {
        var selectedValue = $('#configoption[56]').find(":selected").text();
        if ( selectedValue == '235' ) {
            $('.message').show();
        } else {
            $('.message').hide();
        }
    });
});

The above does not appear to be working for me, any suggestions? I would also like to be able to show the message on multiple selected values.

Upvotes: 1

Views: 3651

Answers (4)

T.J. Crowder
T.J. Crowder

Reputation: 1074959

$('#configoption[56]') is looking for an element with the id, not name, configoption[56] (or it would be, but the selector is invalid, you'd have to escape those brackets).

To use the name:

$('select[name="configoption[56]"]')...

Separately, you can just use val, you don't have to use find to get the selected option. You can also use toggle for show/hide:

$(document).ready(function() {
    $('select[name="configoption[56]"]').change(function() {
        $('.message').toggle($(this).val() == '235');
    });
});

Re your comment about toggling based on || and two values:

$(document).ready(function() {
    $('select[name="configoption[56]"]').change(function() {
        var value = $(this).val();
        $('.message').toggle(value == '235' || value == '123');
    });
});

Upvotes: 1

Mayank Pathak
Mayank Pathak

Reputation: 3681

Your approach needs a little modification. All you had to do these changes

$(document).ready(function() {
$("select[name=configoption[56]]").change(function() { // change jquery selector for name
    var selectedValue = $('#configoption[56]').val(); // and val to get the value
    if ( selectedValue == '235' ) {
        $('.message').show();
    } else {
        $('.message').hide();
    }
});
});

And with the same jQuery code. below has to be

  <select name="configoption[56]" >
  // onchange="recalctotals()"> was not required

Upvotes: 0

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

Well your .change function is specifically binded to an element with id="configoption[56]" So just add id to your select element as below

<select name="configoption[56]"  id="configoption[56]" onchange="recalctotals()">
   //Options
</select>

UPDATE

As per @T.J.Crowder's suggestion on invalid selector I would like to modify a slight change on the id. You can use configoption56 as id and write your select.change as follows:

<select name="configoption[56]"  id="configoption56" onchange="recalctotals()">
       <!--Options-->
</select>

.change

$('#configoption56').change(function() {
  //other codes
});

Upvotes: 1

tux
tux

Reputation: 1287

I should be doing it like this: http://jsfiddle.net/nmn17cr6/

HTML:

<select name="configoption[56]" id="configoption" onchange="recalctotals()">
<option value="1">Dummy</option>
<option value="235">USA</option>
<option value="206">Europe</option>
</select>
<span class="message">You selected USA!</span>

CSS:

.message {
    display:none;
}

jQuery:

$(document).ready(function() {

    $('#configoption').change(function() {

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

        if ( selectedValue == '235' ) {
            $('.message').show();
        } else {
            $('.message').hide();
        }

    });
});

Upvotes: 0

Related Questions