jQuery：隐藏和显示输入元素答案

【问题标题】：jQuery: hide and show an input elementjQuery：隐藏和显示输入元素
【发布时间】：2012-08-08 17:50:33
【问题描述】：

如果选中了一个选择值，我正在尝试隐藏/显示某个输入对象。

代码的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();
        }
    });
});

因此，如果用户选择“其他”，它会显示另一个输入对象。

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

第一次加载页面时有什么技巧可以让它隐藏吗？不仅是在您手动选择值时。

谢谢你们。

【问题讨论】：

标签： jquery input hide show

【解决方案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/

【讨论】：

【解决方案2】：

一开始可以用css隐藏

#add_fields_placeholderValue{display:none;}

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

您还有多个具有相同 id 的元素（由 Brandon 指出），这是无效的

【讨论】：

如果您在不解决冲突 ID 的情况下执行此操作，则输入框将永远不会出现。至少在 chrome 中对我来说不会。

【解决方案3】：

我通常会考虑隐藏/显示逻辑：

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

并在页面加载时调用它。

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

但我很想看看其他人通常会做什么。

【讨论】：

当然，希望对您有所帮助。与其他答案类似，当您使用预先填充的表单重新加载页面时，这会派上用场。

【解决方案4】：

您可以简单地使用 CSS：

在此处更改 ID：

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

因为你已经在这里使用了它

<div id="add_fields_placeholderValue">

然后添加这个css：

#add_fields_placeholderValue {
  display: none;       
}

【讨论】：

谢谢。我不认为这真的是这种情况下的最佳选择。但是你在其他情况下给了我一个额外的选择；）谢谢。
我同意，如果由于某种原因未启用 javascript，则永远不会显示 div。不过，您可能仍想解析共享 ID。

【解决方案5】：

如果你把匿名方法改成可调用函数，你应该可以在Ready()上调用它

例如

$(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】：

将以下代码放在占位符元素下方：

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

在就绪处理程序中执行此操作可能会在某些情况下导致元素“闪烁”：

Twinkling when call hide() on document ready

【讨论】：