文本框可见的下拉textchange jquery asp.net

本文关键字：textchange jquery asp net 文本 | 更新日期: 2023-09-27 18:11:40

这是我的脚本

$(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， ' txtto可见

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

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

然而，所有的控件都是可见的，下拉文本更改时什么也没有发生。

文本框可见的下拉textchange jquery asp.net

使用 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"/>

我认为你需要写事件的点击为例。因为这个

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

你也可以试试这个

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

相关文章：