16

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

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

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

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

当您第一次加载页面时，是否有任何技巧可以使其隐藏？不仅仅是当您手动选择一个值时。

谢谢你们。

4

6 回答 6

23

只需添加：

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

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

IE

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

于 2012-08-11T23:15:20.683 回答
2

您可以使用 css 最初隐藏它

#add_fields_placeholderValue{display:none;}

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

此外，您有多个具有相同 id 的元素（布兰登指出），这是无效的

于 2012-08-11T23:18:08.543 回答
1

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

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

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

于 2012-08-11T23:17:23.773 回答
1

你可以简单地用 CSS 来做：

在此处更改 ID：

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

因为你已经在这里使用了

<div id="add_fields_placeholderValue">

然后添加这个CSS：

#add_fields_placeholderValue {
  display: none;       
}​
于 2012-08-11T23:19:11.913 回答
1

如果您将匿名方法更改为可调用函数，您应该可以在 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();
    }
}​
于 2012-08-11T23:21:32.397 回答
1

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

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

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

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

于 2012-08-11T23:23:44.763 回答