如何在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应用程序。
在这个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和Add Id添加到div中,默认情况下隐藏它们(display:none),然后在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>
相关文章:
- 如何使用jQuery选择下拉列表的值
- Jquery 读取编号组中选择下拉列表的数组
- 使用$_POST值选择下拉列表
- 使用Ajax或JavaScript选择下拉列表选项后,在同一页面上执行PHP脚本
- 根据url填充表单选择下拉列表
- 使 URL 开始选择下拉列表
- 引导程序选择下拉列表
- 如何通过选择下拉列表中的选项从另一个 php 文件中获取数据
- 保持元素处于禁用状态,直到未在 Angularjs 中选择下拉列表
- Knockoutjs - 单击按钮时打开选择下拉列表
- 使用选择下拉列表的性别角度过滤器
- 如何根据选择下拉列表从表单重定向到 URL
- 如果未选择第一项,请选择下拉列表 jQuery
- 选择下拉列表需要在选中时显示提供商的详细信息-无法通过我的脚本显示url
- 使用对象(JavaScript或jQuery)填充选择下拉列表
- 如何在选择下拉列表值的文本框中获取值
- 删除基于先前下拉列表选择的“选择下拉列表”选项
- jQuery验证插件-比较两个选择下拉列表的自定义方法
- 通过ajax选择下拉列表
- JavaScript:使用用于Protractor测试的页面对象选择下拉列表项