jQuery:隐藏和显示输入元素 [英] 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.

JSFiddle中的代码

代码的HTML部分在这里:

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>​

jQuery的部分在这里:

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.

谢谢你们.

推荐答案

只需添加:

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

在更改页面加载事件声明之后.

After your change event declaration on page load.

即

$(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();
});

工作示例: http://jsfiddle.net/bZXYR/

这篇关于jQuery:隐藏和显示输入元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！