jQuery - 如何根据选定的下拉菜单显示/隐藏文本框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6427495/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery - How to show/hide text box based on selected drop down
提问by navalhawkeye
Sorry if this is extremely obvious, but I have looked and looked for a solution but haven't found anything. I'm very new to jQuery, so even looking for what I want to do has been hard.
对不起，如果这非常明显，但我已经寻找并寻找解决方案但没有找到任何东西。我对 jQuery 很陌生，所以即使寻找我想做的事情也很困难。
I have a page with a bunch of fields and drop down boxes that are populated from a database. So each drop down has the correct item (the one stored in the database) selected when the page loads. When that option is "Other" I want my Other text box to show up.
我有一个页面，其中包含从数据库填充的一堆字段和下拉框。因此，当页面加载时，每个下拉菜单都选择了正确的项目（存储在数据库中的项目）。当该选项为“其他”时，我希望显示“其他”文本框。
So, the question is; how do I show/hide that text box based on the selected drop down item when the page loads? Everything I have been able to find in my research has been related to the drop down menu changing. This works fine for one of the other pages I have. I don't want to have to reselect "Other" (triggering the change event).
所以，问题是；当页面加载时，如何根据选定的下拉项显示/隐藏该文本框？我在研究中所能找到的一切都与下拉菜单的变化有关。这适用于我拥有的其他页面之一。我不想重新选择“其他”（触发更改事件）。
Thanks
谢谢
回答by Diego
$(function() {
if($("#yourDropDown").val() == 0) //I'm supposing the "Other" option value is 0.
$("#yourTextBox").hide();
});
回答by genesis
$("option").bind('click', function(){
var selected = $(this).val();
alert(selected+' selected');
if (selected == '1') {?/* do anything you want */ }
if (selected == '2') { /* do anything you want */ }
//etc ...
});
回答by FishBasketGordo
I've had to do this very thing. Here's the code I used:
我不得不做这件事。这是我使用的代码：
$(function() {
var
jqDdl = $('#ddl'),
onChange = function(event) {
if ($(this).val() === 'Other') {
$('#otherTxtbox').show();
$('#otherTxtbox').focus().select();
} else {
$('#otherTxtbox').hide();
}
};
onChange.apply(jqDdl.get(0)); // To show/hide the Other textbox initially
jqDdl.change(onChange);
});
回答by Ryan
If you have a select box, i.e.
如果你有一个选择框，即
<select class="myselect">
....
</select>
you can bind to .change(), i.e.
你可以绑定到.change()，即
$('.myselect').change(function() {
--> do show hide here.
});
Look up jquery .show()and .hide(). (http://api.jquery.com/show and http://api.jquery.com/hide).
查找 jquery.show()和.hide(). （http://api.jquery.com/show 和http://api.jquery.com/hide）。
回答by Jose Faeti
Assuming by default your html has both boxes and the "Other" box is hidden.
假设默认情况下您的 html 有两个框并且“其他”框是隐藏的。
val = $('#myselect').val();
switch( val ) {
case "Other":
$('#mybox').hide();
$('#myotherbox').show();
break;
}
回答by Asim
Please try this code, hope it may work
请尝试此代码，希望它可以工作
<asp:TextBox ID="txtOtherEntity" runat="server" style="display:none;" ></asp:TextBox>
$(function() {
$("#ddlEntity").change(function() {
var selectedVal = $('option:selected', this).text();
if(selectedVal == "Other")
{
$('#txtOtherEntity').css('display', 'block');
}
else
{
$('#txtOtherEntity').css('display', 'none');
}
});
