jQuery: hide and show an input element

孤者浪人 提交于 2020-05-11 04:13:34

问题


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



来源:https://stackoverflow.com/questions/11918397/jquery-hide-and-show-an-input-element

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!