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>

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

默认情况下，系统会选择Default，如果用户选择的地点名称txtvenue应该可见且txtfrom，txtto隐藏，

如果用户选择日期txtvenue应隐藏且txtfrom，`txtto visible

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

<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

在这里你也可以尝试这个

＆＃13;

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

＆＃13;

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

＆＃13;

文本框在下拉列表中可见textchange jquery asp.net

3 个答案: