jquery hide show输入对象

我在jsfiddle上有这段代码。我试图做的所有事情是隐藏/显示某个输入对象，如果选中的值被选中。jquery hide show输入对象

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

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

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

当你第一次加载页面时，是否有任何把它隐藏的技巧？不只是当你手动选择一个值。

谢谢你们。

来源

2012-08-11 inrob

只需添加：

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

来源

2012-08-11 23:15:20

谢谢你很多朋友:)这很好。 – inrob 2012-08-11 23:21:07

@bornie - nice：D – 2012-08-11 23:21:38

我通常分解出隐藏/显示逻辑：

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-11 23:17:23 Tuanderful

谢谢你的代码:) – inrob 2012-08-11 23:22:02

当然，希望它有帮助。与其他答案类似，当您使用预先填充的表单重新加载页面时，此功能会派上用场。 – Tuanderful 2012-08-11 23:25:55

您可以使用CSS最初隐藏

#add_fields_placeholderValue{display:none;}

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

你也有相同的ID（由布兰登指出的），这是无效的多个元素

来源

2012-08-11 23:18:08 Musa

如果您在不解决冲突ID的情况下执行此操作，输入框将永远不会显示。至少它不会适合我。 – Brandon 2012-08-11 23:22:46

@Brandon谢谢，更新 – Musa 2012-08-11 23:27:39

你可以只需使用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-11 23:19:11 Brandon

谢谢。我不认为这会是这种情况下最好的选择。但是，您在其他情况下给了我一个额外的选项;）谢谢。 – inrob 2012-08-11 23:22:45

我同意，如果由于某种原因JavaScript未启用div永远不会显示。你可能仍然想解析共享ID。 – Brandon 2012-08-11 23:27:18

如果你改变了匿名方法到一个可调用的函数，你应该能够调用它就绪（）

$(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-11 23:21:32

放置占位符元素之下的下面的代码：

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

在准备处理程序否则它可能会诱发在某些情况下元件的“闪蒸”：

Twinkling when call hide() on document ready

来源

2012-08-11 23:23:44

jquery hide show输入对象

回答

相关问题