jQuery: hide and show an input element

Viewed 109243

I'm trying to do is hiding/showing a certain input object if a select value is checked.

Code in JSFiddle

The HTML part of the code is here:

<label for="add_fields_placeholder">Placeholder: </label>
<select name="add_fields_placeholder" id="add_fields_placeholder">
    <option value="50">50</option>
    <option value="100">100</option>
    <option value="Other">Other</option>
</select>
<div id="add_fields_placeholderValue">
    Price:
    <input type="text" name="add_fields_placeholderValue" id="add_fields_placeholderValue">
 </div>​

And the jQuery part is here:

$(document).ready(function()
{
    $("#add_fields_placeholder").change(function() {
        if($(this).val() == "Other") {
            $("#add_fields_placeholderValue").show();
        }
        else {
            $("#add_fields_placeholderValue").hide();
        }
    });
});

​ So if user selects "Other", it shows another input object.

The problem now is this. First when you open the page the first option is selected by default and the optional input object is shown. It hides once you select another option.

Is there any trick to make it hide when you first load the page too? Not just when you select a value manually.

Thank you guys.

6 Answers
Related