<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实现一个通过拼音首字母快速选择下拉列表的功能，这一功能通常用于提高用户在网页上的数据输入效率，特别是处理大量中文姓名或词汇时。 首先，我们需要理解HTML的基本结构，它...
JavaScript实现下拉列表选中某个值的方法主要包括三种方式，分别为通过索引选择、通过name或id选择以及通过value值选择。以下详细阐述每种方法的实现原理和步骤。 首先，了解基本的HTML结构，一个下拉列表通常由一...
本项目“js下拉列表效果”正是针对这一需求，通过JavaScript技术对下拉列表进行增强和美化，确保在低版本IE浏览器中也能呈现良好的视觉效果。下面将详细介绍该知识点的相关内容。 1. **JavaScript基础** 在这个...
JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 下拉列表和可选项 示例代码JavaScript 事件处理 ...
根据给定的信息，本文将详细解释JavaScript代码片段中涉及的关键概念和技术细节，这些技术主要用于处理HTML页面中的下拉列表框。 ### 一、JavaScript与HTML交互基础 在深入解析这段代码之前，我们先来了解一些基本...
js年月日下拉列表联动,js年月日下拉列表联动,js年月日下拉列表联动,js年月日下拉列表联动
使用现成的库或框架可以简化代码，例如使用Vue.js的`v-for`指令动态渲染列表，但基础的JavaScript理解仍然是必不可少的。 总结起来，实现无限级联下拉列表主要涉及数据结构的设计、HTML结构的创建、JavaScript事件...
在Web开发中，下拉列表经常与数据表格结合使用，例如在表格中的一列中应用下拉列表，以便用户可以对数据进行筛选或编辑。 通常，下拉列表的实现可以通过HTML、CSS和JavaScript来完成。HTML用于构建基础结构，CSS...
### 级联下拉列表工具类：JS实现详解 #### 概述 级联下拉列表是一种在前端开发中常见的交互方式，特别是在处理多层级数据时，它能有效地帮助用户进行选择。本文将深入分析一个名为`ComboSelectFactory`的...
本示例中，我们将探讨如何使用纯JavaScript和CSS来实现一个简单的下拉列表功能，特别适合用于网站的二级导航。 首先，让我们了解下拉列表的基本结构。一个基本的HTML下拉列表通常由`<select>`元素和一系列`<option>...
这个项目是基于JavaScript（JS）、PHP和AJAX技术实现的一个二级下拉列表功能，它能够模拟常见的下拉选择框，并提供了交互式的用户体验。下面将详细解释这个项目中的关键知识点。 1. **JavaScript（JS）**: JS是前端...
### js+jsp 联动下拉列表框 在网页开发中，经常需要用到联动下拉列表来实现数据的动态关联展示。例如，在一个电子商务网站上，用户选择省份时，对应的市级下拉列表会随之更新。这种功能的实现依赖于前端JavaScript...
接下来，我们需要使用JavaScript来监听下拉列表的`change`事件，当用户选择一个新选项时，触发跳转操作。可以使用以下代码： ```javascript document.getElementById('dropdown').addEventListener('change', ...
二级联动的核心在于监听第一个下拉列表的`onChange`事件，当用户在第一个下拉列表中选择一个选项时，触发该事件，通过JavaScript获取当前选中的索引或值，然后根据这个信息动态地更新第二个下拉列表的选项。...
附件为：下拉列表智能提示JS，例如下拉列表中有上海，则直接在页面上调用此JS类就可以了，什么事件都不用写。调用后，输入sh，上海就被选择了。
下拉列表，也称为下拉菜单或选择框，是用户界面设计中的一个重要元素，它允许用户从一组预定义的选项中进行选择。而按键自动选择则是指用户在下拉列表中输入字符时，系统会自动匹配并高亮显示与输入字符相匹配的选项...
复选下拉列表通常具有嵌套选项，即下拉菜单中的某些选项还可以展开为更具体的子选项。这种设计适用于层级结构的数据，例如地区选择时的国家-省份-城市三级联动。 4. **jQuery Mutiselect 插件**： Mutiselect是一...
然而，在实际项目中，可能需要处理更复杂的逻辑和更大的数据量，此时可以考虑使用更高级的前端框架如React或Vue.js，它们提供了更强大的状态管理和组件化开发能力，能够更好地支持大规模的级联下拉列表和其他复杂的...
6. **DOM操作**：使用JavaScript操作DOM，清空市（县）下拉列表，然后根据返回的数据添加新的选项。 7. **最后的联动**：当市（县）下拉列表更新完成后，可以继续监听其`change`事件，以便在用户选择市（县）后，...
"C#可输入的下拉列表框"是一种交互式控件，它结合了传统的下拉列表功能和文本输入框的功能，允许用户既可以从中选择已有的选项，也可以自由输入新的值。这种控件在提高用户体验和数据输入灵活性方面起到了重要作用。...