jQuery - 如何根据所选下拉菜单显示/隐藏文本框

Question

抱歉，如果这很明显，但我已经寻找解决方案很久了，却没有找到任何东西。我对jQuery非常陌生，所以即使是寻找我想要做的事情也很困难。

我有一个页面，其中有很多字段和下拉框，它们都是从数据库中填充的。因此，当页面加载时，每个下拉框都选择了正确的项目（存储在数据库中的项目）。当该选项为“其他”时，我希望我的其他文本框出现。

因此，问题是：如何在页面加载时根据所选下拉框项目显示/隐藏该文本框？我在研究中能够找到的所有内容都与下拉菜单更改有关。对于我拥有的另一页，这很好用。我不想重新选择“其他”（触发更改事件）。

谢谢

- navalhawkeye

Answer 1

$(function() {
    if($("#yourDropDown").val() == 0) //I'm supposing the "Other" option value is 0.
         $("#yourTextBox").hide();
});

- Diego

---

@Diego，我想通过获取文本框的名称来隐藏文本框，类似于 $('yourtextbox').hide();。 - Muhammad Taqi

@MuhammadTaqiHassanBukhari 我不明白你想做什么。 - Diego

Answer 2

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

- genesis

Answer 3

我曾经不得不做这件事。这是我使用的代码：

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

- FishBasketGordo

Answer 4

如果您有一个选择框，即：

<select class="myselect">
   ....
</select>

你可以绑定到.change()，例如：

$('.myselect').change(function() {
       --> do show hide here.
});

请查找jquery中的.show()和.hide()。（http://api.jquery.com/show 和 http://api.jquery.com/hide）。

- Ryan

Answer 5

假设默认情况下您的HTML中有两个框，并且“其他”框已隐藏。

val = $('#myselect').val();

switch( val ) {

  case "Other":

    $('#mybox').hide();

    $('#myotherbox').show();

    break;

}

- Jose Faeti

Answer 6

请尝试这段代码，希望它能够正常工作。

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

- Asim