Fatal编程技术网
  • javascript/
  • 如何根据在asp.net web应用程序中使用javascript从下拉列表中选择的选项显示不同的输入类型

如何根据在asp.net web应用程序中使用javascript从下拉列表中选择的选项显示不同的输入类型

javascript jquery asp.net drop-down-menu

如何根据在asp.net web应用程序中使用javascript从下拉列表中选择的选项显示不同的输入类型,javascript,jquery,asp.net,drop-down-menu,Javascript,Jquery,Asp.net,Drop Down Menu,我正在用vb.net和asp.net开发一个web应用程序 在这个web应用程序中，一个web表单如下所示 需要新的身份 上面下拉列表中显示的选项/数据来自数据库，它们也是有条件的。这些选项并非总是固定不变的。根据用户以前的选择，它们是可见的 在这些数据中有3个数据，我想为它们显示3种不同的输入类型。这3个选项/数据的id分别为10、11和12 我想根据下拉列表中选定的数据在此下拉列表下显示不同的输入类型 范例 如果在下拉列表中选择的数据id为10，我想在下拉列表下方显示一个文本框

我正在用vb.net和asp.net开发一个web应用程序

在这个web应用程序中，一个web表单如下所示 需要新的身份

上面下拉列表中显示的选项/数据来自数据库，它们也是有条件的。这些选项并非总是固定不变的。根据用户以前的选择，它们是可见的

在这些数据中有3个数据，我想为它们显示3种不同的输入类型。这3个选项/数据的id分别为10、11和12

我想根据下拉列表中选定的数据在此下拉列表下显示不同的输入类型

范例

如果在下拉列表中选择的数据id为10，我想在下拉列表下方显示一个文本框

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

               <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>
如果在下拉列表中，所选数据id为12，我想在下拉列表下方显示日历

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

               <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实现它？ 请帮我写代码

非常感谢。 编辑代码

<%@ 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和Id添加到div中，默认情况下隐藏它们显示：无，然后在select控件的onchange事件中显示它们

编辑：在母版页/详细页的情况下添加正确的控件id解析

<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>
看一看，我已经看到了你提到的链接。但我仍在努力显示输入类型。因为我的选项值来自数据库，它们也是有条件的。这些选项并非总是固定不变的。根据用户以前的选择，它们是可见的。你能帮我编写代码吗？在这种情况下，你应该从数据库中提取所有不同的选择选项，使用css隐藏它们，并使用js根据用户选择显示正确的。感谢您的回复。但是在选择特定选项时，特定的块不会显示。在我的web应用程序中，选项值来自数据库。因此，我根据我的问题编写了select代码。i、 我只写了块，没有在块内写块的代码。是因为代码不起作用吗？我已经调试了代码。选择字段中的数据值正确。仅供参考。id是整数值。不管这些值是否来自数据库，您都需要包含onchange和javascript块。您好，很抱歉回复太晚。请查看问题中我编辑的代码。我已经根据你的答案编辑了代码。选择正确选项时，日历不显示。我调试了代码以查看选择框中的值。这似乎是正确的。KO JS一直都在这个文件中。我已经禁用了KO-JS代码。我已经禁用了代码，以查看KO-JS是否正在阻止它。但结果是一样的。你能告诉我哪里错了吗？使用编辑过的代码，当表单打开时，日历是可见的。但当更改下拉框中的选项时，它将不可见。即使选择了正确的选项，它也不会出现。您好，因为您使用的是母版/详细页，您的控件名称会获得特殊ID，您的comNewStatus会变成ctl01\u contentplaceholder\u comNewStatus等。您需要更改脚本以使用新控件ID，如下所示：if$.val==1。