Question

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

代码的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/

Answer 2

您最初可以使用css隐藏它

#add_fields_placeholderValue{display:none;}

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

此外，您有多个具有相同ID的元素（由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();
    });
});

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

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

Answer 5

如果您将匿名方法更改为可调用函数，您应该可以在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();
    }
}

Answer 6

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

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

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

Twinkling when call hide() on document ready

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

6 个答案: