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

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

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

有没有什么技巧可以使它在您首次加载页面时也隐藏？而不仅仅是在手动选择值时隐藏。

谢谢大家。

- inrob

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/

- Travis J

Answer 2

您可以使用CSS来最初隐藏它。

#add_fields_placeholderValue{display:none;}

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

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

- Musa

---

如果您在不解决冲突的ID的情况下执行此操作，输入框将永远不会显示。至少在Chrome中对我来说是这样的。 - Brandon

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

但我很想知道其他人通常做什么。

- Tuanderful

---

当然，希望它有所帮助。与其他答案类似，当您重新加载带有预填表单的页面时，这将非常方便。 - Tuanderful

Answer 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;       
}​

- Brandon

---

谢谢。我不认为这对这种情况是最好的选择。但你给了我在其他情况下的额外选项 ;) 谢谢。 - inrob

如果由于某些原因 JavaScript 未启用，则不会显示 div，我同意这一点。但您可能仍希望解决共享 ID 的问题。 - Brandon

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

- Craig Godden-Payne

Answer 6

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

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

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

在文档准备就绪时调用 hide() 时闪烁

- Dave R.