gpt4 book ai didi

javascript - 如何在 ASP.NET Web 应用程序中使用 javascript 根据下拉列表中所选的选项显示不同的输入类型

转载 作者:行者123 更新时间:2023-12-03 11:35:14 26 4
gpt4 key购买 nike

我正在使用 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>

如果在下拉列表中所选数据 ID 为 12,我想在下拉列表下方显示日历

               <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,默认隐藏它们(display:none),然后在选择控件的 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>

关于javascript - 如何在 ASP.NET Web 应用程序中使用 javascript 根据下拉列表中所选的选项显示不同的输入类型,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26546885/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com