<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>下拉列表框</TITLE>
<script type="text/javascript">
function showPic(num){
if(num!=""){
for(var i=1;i<9;i++){
if(num==i){
document.getElementById("pic"+i).style.display="block";
}else{
document.getElementById("pic"+i).style.display="none";
}
}
}else{
for(var i=1;i<9;i++){
document.getElementById("pic"+i).style.display="none";
}
}
}
</SCRIPT>
</HEAD>
<BODY>
<FORM action="" method="post" name="myform">
<TABLE width="666" cellpadding="0" cellspacing="0" background="images/bg.jpg" align="center">
<TR>
<TD height="70" align="center"><H3>魔兽世界八大种族(图)</H3></TD>
</TR>
<TR>
<TD height="44" align="center">
<SELECT name="artType" onChange="showPic(this.value)">
<option value="">--请选择一个种族--</option>
<OPTION value="1">人类</OPTION>
<OPTION value="2">暗夜精灵</OPTION>
<OPTION value="3">矮人</OPTION>
<OPTION value="4">侏儒</OPTION>
<OPTION value="5">兽人</OPTION>
<OPTION value="6">牛头人</OPTION>
<OPTION value="7">亡灵</OPTION>
<OPTION value="8">巨魔</OPTION>
</SELECT>
</TD>
</TR>
<TR>
<td align="center" height="234">
<DIV id="pic1" style="display:none"><IMG src="images/humans-small.jpg"></DIV>
<DIV id="pic4" style="display:none"><IMG src="images/gnomes-small.jpg"></DIV>
<DIV id="pic3" style="display:none"><IMG src="images/dwarves-small.jpg"></DIV>
<DIV id="pic2" style="display:none"><IMG src="images/nightelves-small.jpg"></DIV>
<DIV id="pic5" style="display:none"><IMG src="images/orcs-small.jpg"></DIV>
<DIV id="pic6" style="display:none"><IMG src="images/tauren-small.jpg"></DIV>
<DIV id="pic7" style="display:none"><IMG src="images/undead-small.jpg"></DIV>
<DIV id="pic8" style="display:none"><IMG src="images/trolls-small.jpg"></DIV></td>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
分享到：
相关推荐
在JavaScript中，获取下拉列表（也称为选择框或`<select>`元素）的值是一项常见的任务，特别是在处理用户输入和交互时。本篇博文中，我们将深入探讨如何有效地实现这一功能。 首先，我们需要理解HTML中的`<select>`...
在网页开发中，"js多选下拉列表"是一种常见的用户界面元素，它允许用户从一个下拉菜单中选择多个选项。多选下拉列表在数据筛选、设置配置或者进行多值选择时非常实用。本篇文章将深入探讨这一主题，包括复选下拉列表...
本篇文章将详细探讨几款优秀的JavaScript下拉列表插件，以及如何利用它们来提升用户体验。 首先，我们要介绍的是`chosen`插件，这正是`chosen-master`压缩包中的主角。`Chosen`是一款非常流行的下拉列表增强插件，...
如果你不想依赖外部库，也可以使用原生JS来创建自定义的下拉按钮列表。首先，你需要创建一个包含多个`<option>` 的`<select>` 元素。然后，通过监听`mouseover` 和`mouseout` 事件，可以控制下拉列表的显示和隐藏。...
JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 ...
### 级联下拉列表工具类：JS实现详解 #### 概述 级联下拉列表是一种在前端开发中常见的交互方式，特别是在处理多层级数据时，它能有效地帮助用户进行选择。本文将深入分析一个名为`ComboSelectFactory`的...
本示例中，我们将探讨如何使用纯JavaScript和CSS来实现一个简单的下拉列表功能，特别适合用于网站的二级导航。 首先，让我们了解下拉列表的基本结构。一个基本的HTML下拉列表通常由`<select>`元素和一系列`<option>...
使用JavaScript的Ajax技术可以异步加载后一个下拉列表框的选项，当用户选择了前一个下拉列表框的选项后，JavaScript就会向服务器发送请求，服务器返回相应的数据，然后JavaScript就会根据数据来生成后一个下拉列表框...
《dropList v1.1：JavaScript无限级联动下拉列表框深度解析》 在Web开发中，用户界面的交互性和易用性至关重要。一个优秀的下拉列表框不仅可以提高用户体验，还能有效节省页面空间。今天我们将深入探讨“dropList v...
接下来，我们需要使用JavaScript来监听下拉列表的`change`事件，当用户选择一个新选项时，触发跳转操作。可以使用以下代码： ```javascript document.getElementById('dropdown').addEventListener('change', ...
本文将深入探讨如何使用纯JavaScript实现下拉列表动态查询，并结合提供的"select_by_code.html"和"jquery-1.5.1.min.js"文件进行详细解析。 首先，"下拉列表动态查询"通常指的是用户在输入框中输入关键词时，下拉...
例如，我们可以有一个`<select>`元素作为下拉列表，但为了实现模态效果，这个下拉列表通常会被一个具有`<div>`的模态框替代，初始状态为`display:none`。按钮或输入框则通过`onclick`事件触发JavaScript代码来显示...
`js`文件负责处理用户的交互和下拉列表的显示/隐藏。使用jQuery的`.click()`方法监听点击事件，`.slideToggle()`方法来实现下拉列表的滑动效果。例如： ```javascript $(document).ready(function() { var $...
1. **拼音转换**：使用JavaScript或其他编程语言的库，将下拉列表中的每个选项文本转换为拼音。确保处理好多音字和特殊字符，如“的地得”等。 2. **首字母提取**：从每个选项的拼音中提取首字母，创建一个简写字符...
在实现这个功能时，可以使用JavaScript库如jQuery或React等，配合AJAX技术进行异步数据交互，提高搜索速度。同时，可能还需要引入模糊匹配算法，如Levenshtein距离或Jaccard相似度等，使得用户输入的部分拼音或汉字...
6. **DOM操作**：使用JavaScript操作DOM，清空市（县）下拉列表，然后根据返回的数据添加新的选项。 7. **最后的联动**：当市（县）下拉列表更新完成后，可以继续监听其`change`事件，以便在用户选择市（县）后，...
"C#可输入的下拉列表框"是一种交互式控件，它结合了传统的下拉列表功能和文本输入框的功能，允许用户既可以从中选择已有的选项，也可以自由输入新的值。这种控件在提高用户体验和数据输入灵活性方面起到了重要作用。...
利用Javascript技术实现省市下拉列表的联动。