jQuery - 如何根據所選下拉菜單顯示/隱藏文本框

對不起，如果這是非常明顯的，但我已經看過並尋找解決方案，但沒有發現任何東西。我對jQuery非常陌生，所以即使尋找我想要做的事情也很困難。jQuery - 如何根據所選下拉菜單顯示/隱藏文本框

我有一個頁面有一堆字段，並從數據庫中填充下拉框。因此每個下拉菜單都有正確的項目（存儲在數據庫中的項目）在頁面加載時選擇。當該選項是「其他」時，我想顯示我的其他文本框。

所以，問題是，當頁面加載時，如何根據所選下拉項目顯示/隱藏該文本框？我在研究中找到的所有內容都與下拉式菜單更改有關。這適用於我有的其他頁面之一。我不想重新選擇「其他」（觸發更改事件）。

感謝

2011-06-21 navalhawkeye

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

來源

2011-06-21 15:09:43 Diego

非常感謝你，這並獲得成功！ – navalhawkeye

@Diego我想隱藏文本字段，比如''（'yourtextbox'）。hide（）;' –

@MuhammadTaqiHassanBukhari我不明白你想做什麼 – Diego

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

來源

2011-06-21 15:06:32 genesis

我不得不做這事。下面是我使用的代碼：

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

來源

2011-06-21 15:07:40 FishBasketGordo

如果你有一個選擇框，即

<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）。

來源

2011-06-21 15:08:11 Ryan

假設默認情況下你的HTML有兩個框和「其他」框是隱藏的。

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

switch(val) { 

    case "Other": 

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

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

    break; 

}

來源

2011-06-21 15:15:06

請試試這個代碼，希望對大家的工作

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

來源

2015-05-15 07:46:22 Asim

jQuery - 如何根據所選下拉菜單顯示/隱藏文本框

回答

相關問題