下拉文本更改 jquery asp.net 上可见的文本框

Question

这是我的脚本

$(document).ready(function () {
    $("#txtfrom").hide();
    $("#txtto").hide();
    $("#txtvenue").hide();
    $("#drdsearch").text == "Venue Name"(function () {
        $("#txtfrom").hide();
        $("#txtto").hide();
        $("#txtvenue").show();
    });
    $("#drdsearch").text == "Date"(function () {
        $("#txtfrom").show();
        $("#txtto").show();
        $("#txtvenue").hide();
    });
});

这些是我的控件

<div>
    <p style="margin-top:-24px;">
        <b style="font-size:16px; margin-left:180px;">Search By:</b>
    </p>
    <select id="drdsearch" style="margin-top:-39px; margin-left:300px; height:30px; width:200px; font-size:12px;">
        <option>Default</option>
        <option>Venue Name</option>
        <option>Date</option>
    </select>
</div>
<div style="margin-left:300px">
    <p style="font-family: Verdana">
        <asp:TextBox ID="txtvenue" runat="server" CssClass="txttopborder font" ng-model="venue" Text="" placeholder="venue" Height="30" Width="200"></asp:TextBox>
        <asp:TextBox ID="txtfrom" runat="server" style="margin-left:-300px;" CssClass="txttopborder font" ng-model="from" placeholder="From Date" Text="" Height="30" Width="200"></asp:TextBox>
        <ajaxToolkit:CalendarExtender ID="clndrfrom" runat="server" TargetControlID="txtfrom" Format="dd-MM-yyyy"></ajaxToolkit:CalendarExtender>
        <asp:TextBox ID="txtto" runat="server" CssClass="txttopborder font" ng-model="to" Text="" placeholder="To Date" Height="30" Width="200"></asp:TextBox>
        <ajaxToolkit:CalendarExtender ID="clndrto" runat="server" TargetControlID="txtto" Format="dd-MM-yyyy"></ajaxToolkit:CalendarExtender>
        <%-- <button type="button" ng-click="Addrecord(x)" style="height:30px; width:50px;" class="btn btn-sm btn-primary active" data-toggle="modal" data-target="#Detailsmodel"><i class="glyphicon glyphicon-search" style="font-size:20px;"></i></button> --%>
    </p>
</div>

我正在创建一个 Web 应用程序，其中我从下拉列表中为用户提供了 3 个选项 1) 默认 2) 场地名称 3) 日期

默认情况下，Default 被选中，如果用户选择场地名称，txtvenue 应该是可见的，txtfrom,txtto 隐藏，

如果用户选择日期txtvenue 应该被隐藏并且txtfrom,`txt 可见

我在我的页面上添加了这个脚本

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

但是，所有控件都是可见的，并且下拉文本更改时没有发生任何事情。

Answer 1

使用 change() 事件。

基于所选值，您可以hide 和show 尊重输入。

而且您缺少下拉选项值。

在我的例子中，

• 我已经为下拉列表和这些值作为文本框的 id 给出了值。
• 使用下拉值作为#id 选择器到show 相应的文本框。
• 默认情况下，我隐藏了所有文本框，您可以根据需要进行操作。

例子

$('#select').change(function(){
   if($(this).val == "txtvenue")
   {
     //Show textboxes
   }
});

$('#drdsearch').change(function(){
   $('input').hide();
   $('#'+$(this).val()).show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="drdsearch" style="margin-top:-39px; margin-left:300px; height:30px; width:200px; font-size:12px;">
        <option value="default">Default</option>
        <option value="venue">Venue Name</option>
        <option value="date">Date</option>
    </select>

<input type="text" id="default" value="default"/>
<input type="text" id="venue" value="value"/>
<input type="text" id="date" value="date"/>

Answer 2

例如，我认为您需要在 Click 上编写事件。因为这个

$(document).ready(function () {})

仅在页面准备就绪时调用

如果你想获取用户事件，你需要写这样的东西

$(document).ready(function() {
    $("#drdsearch").onChange(function(e){
        //this logic
        if( $(this).val() == "Venue Name") {
            $("#txtfrom").hide();
            $("#txtto").hide();
            $("#txtvenue").show();
        }
        if($(this).val() == "Date") {
            $("#txtfrom").show();
            $("#txtto").show();
            $("#txtvenue").hide();
        }
    })
})

Answer 3

这里你也可以试试这个

$(document).ready(function () {
    $("#txtfrom").hide();
    $("#txtto").hide();
    $("#txtvenue").hide();
   
    
    $("#drdsearch").change(function(){
    var drp = $(this).val();
    if(drp == 1){
    $("#txtfrom").hide();
    $("#txtto").hide();
    $("#txtvenue").hide();
    }else if(drp == 2){
    $("#txtvenue").show();
    $("#txtfrom").hide();
    $("#txtto").hide();
    }else{
    $("#txtfrom").show();
    $("#txtto").show();
    $("#txtvenue").hide();
    }
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="drdsearch">
        <option value = "1">Default</option>
        <option value = "2">Venue Name</option>
        <option value = "3">Date</option>
    </select>

<input type="textbox" id = "txtfrom" placeholder="TxtFrom">
<input type="textbox" id = "txtto" placeholder="TxtTo">
<input type="textbox" id = "txtvenue" placeholder="Venue">