jQuery:隐藏并显示一个输入元素

Question

我想要做的是隐藏/显示某个输入对象,如果选中了一个选择值.

JSFiddle中的代码

代码的HTML部分在这里:

<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部分在这里:

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

因此,如果用户选择"其他",则显示另一个输入对象.

现在的问题是这个.首先,当您打开页面时,默认情况下会选择第一个选项,并显示可选的输入对象.一旦您选择另一个选项,它就会隐藏.

首次加载页面时是否有任何技巧可以隐藏它？不只是在手动选择值时.

感谢你们.

Answer 1

只需添加:

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

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

即

$(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/