`

关联下拉列表代码示例

阅读更多
<html>
	<head>
		<style>
			#d1{
				width:400;
				height:250;
				background-color:#cccccc;
				left:30;
				top:40;
				position:absolute;
			}
			#d1_head{
				height:30;
				font-size:20pt;
				background-color:blue;
				color:white;
			}
			#d1_body{
				padding-left:40;
				padding-top:40;
			}
		</style>
		<script>
			var arr = new Array;
			arr[0] = [new Option('---方向---','-1')];
			arr[1] = [new Option('专业英语','zyen'),
			new Option('商务英语','swen')];
			arr[2] = [new Option('图形计算','txcp'),
			new Option('计算机应用','jscp'),
			new Option('软件工程','rjcp')];
			function change(index){
				var obj = document.getElementById('s2');
				obj.options.length = arr[index].length;
				for(i=0;i<arr[index].length;i++){
					obj.options[i] = arr[index][i];
				}
			}
		</script>
	</head>
	<body>
		<div id="d1">
			<div id="d1_head">关联下拉列表</div>

			<div id="d1_body">
				<form>
					<select name="s1" id="s1" onchange="change(this.selectedIndex);">
						<option value="-1">---专业---</option>
						<option value="english">英语</option>
						<option value="computer">计算机</option>
					</select>

					<select name="s2" id="s2">
						<option value="-1">---方向---</option>
					</select>
					<input type="submit" value="confirm"/>
				</form>
			</div>
		</div>
	</body>

</html>
分享到:
评论

相关推荐

    利用jsp关联下拉列表日期

    ### 利用JSP关联下拉列表日期 在本文中,我们将探讨如何使用JSP(JavaServer Pages)技术实现关联下拉列表的功能,具体来说是如何根据用户选择的年份和月份动态更新显示的日期列表。这是一个实用且常见的功能,在很...

    div模拟select自定义下拉列表框(jQuery)

    以上代码示例展示了基本的实现思路,但实际应用中可能需要根据项目需求进行更复杂的定制,比如添加选中项的反馈、搜索功能、多选功能等。在提供的`divselect 鼠标移动版`和`divselect 鼠标点击版`文件中,可能包含了...

    ajax实现级联下拉列表代码

    在提供的"ajax实现的级联下拉列表代码.txt"文件中,应该包含了实现上述过程的具体JavaScript代码。这个文件可能包含了一个或多个函数,用于初始化下拉列表、绑定事件监听器、构建AJAX请求、解析响应数据以及更新DOM...

    在datagridview控件实现下拉列表

    如果你的数据源已经包含了下拉列表的值,你可能需要通过 DataPropertyName 属性将ComboBox列与数据源中的字段关联: ```csharp comboBoxColumn.DataPropertyName = "YourDatabaseFieldName"; ``` 在运行时,用户在...

    PB中下拉列表使用的若干技巧.doc

    例如,以下代码示例展示了如何根据hotelid查询p16表,将单位名称添加到下拉列表: ```sql string id, ic int i-op = 1 declare c1 cursor for select hotelid from hotelid-dangan using SQLCA; open c1; fetch ...

    HTML5实现搜索输入框下拉列表代码.zip

    以下是一个基本的HTML5搜索输入框下拉列表的实现示例: ```html &lt;!DOCTYPE html&gt; &lt;title&gt;HTML5搜索输入框下拉列表 请输入关键词: 苹果"&gt; 香蕉"&gt; 橙子"&gt; 葡萄"&gt; &lt;!-- 添加更多选项 --&gt; ``` 在...

    带有复选框的下拉列表

    在网页设计中,有时我们需要创建一个具有复选框功能的下拉列表,让用户可以多选选项。本示例提供了一种实现这一功能的方法,通过两种技术:使用纯HTML和CSS的DIV控制,以及利用JQUERY库。这两种方法都可以有效地增强...

    Ajax实现下拉列表从数据库读取数据级联

    级联下拉列表通常用于关联数据的筛选,例如省份-城市-区县的选择,当用户在一级下拉列表中选择一个选项时,二级下拉列表会动态加载与之相关的数据。 首先,我们需要理解Ajax的工作原理。Ajax允许我们通过JavaScript...

    ajax+struts2.0+jsp下拉列表级联

    在这个“ajax+struts2.0+jsp下拉列表级联”的示例中,我们将探讨如何利用这三个技术实现这种功能。 首先,AJAX(Asynchronous JavaScript and XML)是一种在不刷新整个页面的情况下与服务器交换数据并更新部分网页...

    输入框下拉列表提示.rar

    当用户输入时,代码会清除已有选项,并根据输入值过滤和重新填充下拉列表。 为了提升用户体验,我们还可以加入搜索延迟加载功能,防止用户每次按键都触发搜索,这可以通过`debounce`函数实现。同时,可以添加CSS...

    如何借助ArrayAdapter和Spinner实现下拉列表.zip

    本教程将详细解释如何利用ArrayAdapter和Spinner来创建一个功能完备的下拉列表。 一、Spinner简介 Spinner是Android SDK中的一个组件,类似于iOS中的PickerView。它的主要作用是在有限的选项中让用户做出单选决策,...

    HTML二级联动下拉列表框的实现,如选择 省,市.zip

    HTML二级联动下拉列表框是一种常见的网页交互设计,它允许用户在两个或多个下拉菜单之间建立关联,以便根据用户在第一个下拉框中的选择动态更新第二个下拉框的内容。这种设计常见于区域选择,例如选择省份后,城市...

    动态实现下拉列表框三级级联查询

    在IT领域,动态实现下拉列表框的三级级联查询是一项常见的前端交互功能,它能够为用户提供更加便捷的导航和...在“三级级联.docx”文件中,可能包含了具体的代码示例和详细步骤,你可以参考这份文档进一步学习和实践。

    jQuery 级联下拉列表

    这个函数的目的是让这些下拉列表之间建立联动关系,即当用户在一个下拉列表中做出选择时,其他关联的下拉列表会根据这个选择动态更新其选项。 具体实现过程如下: 1. **HTML结构**:首先,我们需要在HTML页面中...

    在GRIDVIEW 控件中某一列显示下拉列表,并且绑定数据库的另外一张表

    代码示例: ```csharp 下拉列表"&gt; &lt;asp:DropDownList ID="ddlOptions" runat="server" DataSourceID="SqlDataSource1" DataTextField="OptionName" DataValueField="OptionID"&gt;&lt;/asp:DropDownList&gt; &lt;!--...

    AngularJS使用ngOption实现下拉列表的实例代码

    反之,如果在代码中修改`engineer.currentActivity`,下拉列表也会反映出相应的改变。 而`ngOptions`则负责定义下拉列表的选项。在示例中,`ngOptions`表达式为`act for act in activities`。这里的`act`是迭代器...

    tkinter自定义多选下拉列表框(带滚动条,全选)

    本篇文章将深入探讨如何使用`tkinter`来实现一个自定义的多选下拉列表框,该列表框具备滚动条功能以及全选选项。这在创建复杂的用户界面时尤其有用,因为它提供了更好的用户体验和更丰富的交互性。 首先,我们要...

    jsp出生日期三级级联下拉列表

    当用户更改了一个下拉列表的选项时,触发关联的JavaScript函数。 3. **DOM操作**:JavaScript可以用来修改HTML文档的对象模型,即DOM(Document Object Model)。通过改变DOM元素的属性或内容,我们可以更新页面...

    下拉列表多级联动dropDownList示例代码

    总结起来,这个示例展示了如何在Yii框架中利用dropDownList和AJAX实现下拉列表的多级联动效果。关键在于视图中的AJAX配置、控制器的响应处理以及模型的数据库查询。这种功能在实际应用中可以极大地提高用户体验,使...

Global site tag (gtag.js) - Google Analytics