jQuery: hide and show an input element

问题:

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.

回答1:

Just add:

$("#add_fields_placeholderValue").hide();

After your change event declaration on page load.

i.e.

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

Working example: http://jsfiddle.net/bZXYR/

回答2:

You can use css to hide it initially

#add_fields_placeholderValue{display:none;}

http://jsfiddle.net/FarVX/20/

Also you have multiple elements with the same id(pointed out by Brandon), which is not valid

回答3:

I typically factor out the hide/show logic:

function foobar(){
    if($(this).val() == "Other"){
        $("#add_fields_placeholderValue").show();
    }
    else{
        $("#add_fields_placeholderValue").hide();
    }
}

and call it when the page loads.

$(document).ready(function(){
    foobar();
    $("#add_fields_placeholder").change(function(){
        foobar();
    });
});

but i'd be curious to see what other folks usually do.

回答4:

You could simply do it with CSS:

Change the ID here:

<input type="text" name="add_fields_placeholderValue" id="add_fields_placeholderValue">

since you already use it here

<div id="add_fields_placeholderValue">

and then add this css:

#add_fields_placeholderValue {
  display: none;       
}​

回答5:

if you change the anonymous method into a callable function, you should be able to call it on Ready()

e.g.

$(document).ready(function () {
    $("#add_fields_placeholder").change(ShowIfOther);
    ShowIfOther();
});

function ShowIfOther() {
    if ($("#add_fields_placeholder").val() == "Other") {
        $("#add_fields_placeholderValue").show();
    } else {
        $("#add_fields_placeholderValue").hide();
    }
}​

回答6:

Place the following code beneath the placeholder elements:

<script>$('#add_fields_placeholderValue').hide();</script>

Doing it in the ready handler may induce 'flashing' of the element in certain circumstances:

Twinkling when call hide() on document ready