<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>`...
本篇文章将深入探讨如何使用JavaScript实现一个通过拼音首字母快速选择下拉列表的功能，这一功能通常用于提高用户在网页上的数据输入效率，特别是处理大量中文姓名或词汇时。 首先，我们需要理解HTML的基本结构，它...
JavaScript实现下拉列表选中某个值的方法主要包括三种方式，分别为通过索引选择、通过name或id选择以及通过value值选择。以下详细阐述每种方法的实现原理和步骤。 首先，了解基本的HTML结构，一个下拉列表通常由一...
JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 ...
根据给定的信息，本文将详细解释JavaScript代码片段中涉及的关键概念和技术细节，这些技术主要用于处理HTML页面中的下拉列表框。 ### 一、JavaScript与HTML交互基础 在深入解析这段代码之前，我们先来了解一些基本...
js年月日下拉列表联动,js年月日下拉列表联动,js年月日下拉列表联动,js年月日下拉列表联动
### 级联下拉列表工具类：JS实现详解 #### 概述 级联下拉列表是一种在前端开发中常见的交互方式，特别是在处理多层级数据时，它能有效地帮助用户进行选择。本文将深入分析一个名为`ComboSelectFactory`的...
本示例中，我们将探讨如何使用纯JavaScript和CSS来实现一个简单的下拉列表功能，特别适合用于网站的二级导航。 首先，让我们了解下拉列表的基本结构。一个基本的HTML下拉列表通常由`<select>`元素和一系列`<option>...
这个项目是基于JavaScript（JS）、PHP和AJAX技术实现的一个二级下拉列表功能，它能够模拟常见的下拉选择框，并提供了交互式的用户体验。下面将详细解释这个项目中的关键知识点。 1. **JavaScript（JS）**: JS是前端...
《dropList v1.1：JavaScript无限级联动下拉列表框深度解析》 在Web开发中，用户界面的交互性和易用性至关重要。一个优秀的下拉列表框不仅可以提高用户体验，还能有效节省页面空间。今天我们将深入探讨“dropList v...
### js+jsp 联动下拉列表框 在网页开发中，经常需要用到联动下拉列表来实现数据的动态关联展示。例如，在一个电子商务网站上，用户选择省份时，对应的市级下拉列表会随之更新。这种功能的实现依赖于前端JavaScript...
二级联动的核心在于监听第一个下拉列表的`onChange`事件，当用户在第一个下拉列表中选择一个选项时，触发该事件，通过JavaScript获取当前选中的索引或值，然后根据这个信息动态地更新第二个下拉列表的选项。...
下拉列表，也称为下拉菜单或选择框，是用户界面设计中的一个重要元素，它允许用户从一组预定义的选项中进行选择。而按键自动选择则是指用户在下拉列表中输入字符时，系统会自动匹配并高亮显示与输入字符相匹配的选项...
复选下拉列表通常具有嵌套选项，即下拉菜单中的某些选项还可以展开为更具体的子选项。这种设计适用于层级结构的数据，例如地区选择时的国家-省份-城市三级联动。 4. **jQuery Mutiselect 插件**： Mutiselect是一...
在实现这个功能时，可以使用JavaScript库如jQuery或React等，配合AJAX技术进行异步数据交互，提高搜索速度。同时，可能还需要引入模糊匹配算法，如Levenshtein距离或Jaccard相似度等，使得用户输入的部分拼音或汉字...
6. **DOM操作**：使用JavaScript操作DOM，清空市（县）下拉列表，然后根据返回的数据添加新的选项。 7. **最后的联动**：当市（县）下拉列表更新完成后，可以继续监听其`change`事件，以便在用户选择市（县）后，...
- **Bootstrap 支持**：许多下拉列表插件支持 Bootstrap 框架，可以直接使用预设的样式，也可以方便地进行自定义。 - **自定义样式**：开发者可以使用 CSS 直接修改插件的外观，如更改背景色、字体大小、边框等。 ...
在网页开发中，"js带搜索框的下拉列表"是一种常见的交互元素，它结合了传统的下拉选择框和搜索功能，使得用户在大量选项中快速找到目标变得更加方便。这种功能通常用于提供筛选或者过滤选项，特别是在选项数量较多时...
"jq下拉列表特效.zip"这个压缩包包含了8种不同的下拉列表js插件，这些插件可以为你的网站添加独特的视觉效果。 1. **jQuery**: jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax...
例如，使用CSS对下拉列表的样式进行自定义，使用JavaScript（可能引入外部的JavaScript库）来控制下拉列表的行为和样式的变化。注释"[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]"暗示了这可能涉及到脚本的操作，...