如何在asp.net web应用程序使用JavaScript取决于所选的选项，从下拉列表中显示不同的输入类型 [英] How to display different input type depending on selected option from a drop down list using javascript in asp.net web application

问题描述

我发展与vb.net和asp.net的Web应用程序。

I am developing an web application with vb.net and asp.net.

在此Web应用程序的形式之一，是像下面
                
                    新状态（必填）
                    
                

In this web application one of the web form is like below New status (required)

选项/在上述下拉列表中显示的数据是从数据的基础上来，他们是有条件的为好。这些选项是不固定所有的时间。它们根据由用户一个previous选择是可见的。

the options/data shown in the above drop-down list is coming from data base and they are conditional as well. these options are not fixed all the time. they are visible depending on a previous selection by the user.

在这些数据有3个数据，我想显示3种不同的输入类型。这3个选项/数据的ID是10，11和12。

Among those data there are 3 data for which I want to display 3 different input types. the id of these 3 option/data are 10, 11 and 12.

我要显示下面根据在下拉列表中选择该数据下拉列表不同的输入类型。

I want to display different input type below this drop-down list depending on the selected data in the drop-down list.

示例

如果在下拉列表中选定的数据ID是10我要显示在下拉列表下方的文本框中

If in the drop down list the selected data id is 10 I want to display a text box below the dropdown list

            <div class="form-element">
               <label>Offered salary (numeric only!!)</label>
                <input type="text" id="txtOfferedSalary" class="txtOfferedSalary" runat="server" data-bind="value:offeredSalary, valueUpdate: 'afterkeydown'" />
            </div>

如果在下拉列表中选定的数据ID是12我要显示在下拉列表下方的日历

If in the drop down list the selected data id is 12 I want to display a calender below the dropdown list

               <div class="form-element">
                <label>
                    Start date (required if job offered, format: DD-MMM-YYYY)
                </label>
                <div class="input-append">
                    <span class="add-on "><span class="icon-calendar"></span></span>
                    <input class="dp" size="16" type="text" value="" runat="server" id="txtStartDate" />
                </div>
            </div>

有关我不想做任何数据的其余部分。我怎样才能用JavaScript做呢？
请帮我用code。

For the rest of the data I dont want to do anything. How can I do it with javascript? Please help me with code.

编辑code

<%@ Page Title="" Language="VB" MasterPageFile="~/_resx/E4_Popup.master" AutoEventWireup="false" CodeFile="update-status_popup.aspx.vb" Inherits="E4_Jobs_Details_Application_update_status" %>


<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="Server">

            <div class="form-element">
                <label>New status (required)</label>
                <select id="comNewStatus" runat="server" datavaluefield="id" datatextfield="name" class="nFee" onchange="displayDiv()"></select>
            </div>


               <div id="cal" class="form-element">
                <label>
                    Start date (required if job offered, format: DD-MMM-YYYY)
                </label>
                <div class="input-append">
                    <span class="add-on "><span class="icon-calendar"></span></span>
                    <input class="dp" size="16" type="text" value="" runat="server" id="txtStartDate" />
                </div>
            </div>

</asp:Content>



<asp:Content ID="Content2" ContentPlaceHolderID="ScriptContent" runat="Server">
     <script type="text/javascript">

      function displayDiv() {
          if ($("#comNewStatus").val() == "1") {
              $("#cal").show();
          }
          else {
              $("#cal").hide();
          }
      }

     function RefreshParent() {
         if (window.opener != null && !window.opener.closed) {
             window.opener.location.reload();
              }
         }
   window.onbeforeunload = RefreshParent;


</script>

  </asp:Content>

所有的jQuery和提供参考KO-JS已在主文件中的。

推荐答案

添加jQuery和添加标识的您的div，默认情况下隐藏起来。（显示：无），然后选择控制的onchange事件显示它们

Add jquery and add Id's to your divs, hide them by default (display:none) and then display them on the onchange event of the select control.

编辑：添加适当的控制ID在主/详细页的情况下，解决

added proper control id resolving in case of master/detail pages.

<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function displayDiv() {
            if ($("#<%= comNewStatus.ClientID %>").val() == "2") {
                $("#divFirst").show();
            }
            else {
                $("#divFirst").hide();
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div class="form-element">
            <label>
                New status (required)</label>
            <select id="comNewStatus" runat="server" datavaluefield="id" datatextfield="name"
                class="nFee" onchange="displayDiv()">
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Opotion 3</option>
            </select>
        </div>
    </div>
    <div id="divFirst" class="form-element" style="display:none;">
        <label>
            Offered salary (numeric only!!)</label>
        <input type="text" id="txtOfferedSalary" class="txtOfferedSalary" runat="server"
            data-bind="value:offeredSalary, valueUpdate: 'afterkeydown'" />
    </div>
    <div id="divSecond" class="form-element" style="display:none;">
        <label>
            Final salary (numeric only!!)</label>
        <input type="text" id="txtFinalSalary" class="txtFinalSalary" runat="server" data-bind="value:finalSalary, valueUpdate: 'afterkeydown'" />
    </div>
    </form>
</body>

这篇关于如何在asp.net web应用程序使用JavaScript取决于所选的选项，从下拉列表中显示不同的输入类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！