Блог

Это мой скрипт

 $(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 видна

Я добавил этот скрипт на свою страницу

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

Однако все элементы управления видны, и при изменении текста в раскрывающемся списке ничего не происходит.

Используйте change() событие.

На основе выбранного значения вы можете hide и show учитываете входные данные.

И вам не хватает значений раскрывающихся опций.

В моем примере,

• Я ввел значения в раскрывающийся список и эти значения в качестве идентификатора текстовых полей.
• Используйте выпадающие значения в качестве #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">