Question

Im trying to see if a special option in a select-menu has a value equal to 1, and then hide another object. Ive been trying all day but cant figure it out (probably because im a total beginner at jquery)

I have a select-menu that i populated from a db.
If the option with the id=”1″ have “selected=selected”
then i want another div to hide when the page is loaded.

This is what i got so far:

<select>
<option id="3">test1</option>
<option id="1" selected="selected">test2</option>
<option id="2">test3</option>
</select>
<div id="hide">Hide me</div>


$("#1 option:selected").ready(function () {
   $("#hide").hide();
});

Any help would be greatly appreciated. Thanks..
/Andreas

Answer 1

There are a few things wrong with your code I’m afraid:

1. You’re using the event on the wrong object – .ready() should be applied to the document
2. IDs can’t start with a number
3. You should be using the value attribute instead of the id attribute.
4. You’re better off using .val() to get the value
5. You should give the select an id in case you add another one to the page.

Putting it all together:

<select id="foo">
<option value="3">test1</option>
<option value="1" selected="selected">test2</option>
<option value="2">test3</option>
</select>
<div id="hide">Hide me</div>


$(document).ready(function () {
   if ($('#foo').val() != 1)
       $("#hide").hide();
});

If you want to do this dynamically when the select is changed, you can do it like this:

$('#foo').change(function () {
   if ($(this).val() != 1)
       $("#hide").hide();
   else
       $("#hide").show();
});