<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来创建自定义的下拉按钮列表。首先，你需要创建一个包含多个`<option>` 的`<select>` 元素。然后，通过监听`mouseover` 和`mouseout` 事件，可以控制下拉列表的显示和隐藏。...
在Web开发中，下拉列表经常与数据表格结合使用，例如在表格中的一列中应用下拉列表，以便用户可以对数据进行筛选或编辑。 通常，下拉列表的实现可以通过HTML、CSS和JavaScript来完成。HTML用于构建基础结构，CSS...
本示例中，我们将探讨如何使用纯JavaScript和CSS来实现一个简单的下拉列表功能，特别适合用于网站的二级导航。 首先，让我们了解下拉列表的基本结构。一个基本的HTML下拉列表通常由`<select>`元素和一系列`<option>...
《dropList v1.1：JavaScript无限级联动下拉列表框深度解析》 在Web开发中，用户界面的交互性和易用性至关重要。一个优秀的下拉列表框不仅可以提高用户体验，还能有效节省页面空间。今天我们将深入探讨“dropList v...
接下来，我们需要使用JavaScript来监听下拉列表的`change`事件，当用户选择一个新选项时，触发跳转操作。可以使用以下代码： ```javascript document.getElementById('dropdown').addEventListener('change', ...
例如，我们可以有一个`<select>`元素作为下拉列表，但为了实现模态效果，这个下拉列表通常会被一个具有`<div>`的模态框替代，初始状态为`display:none`。按钮或输入框则通过`onclick`事件触发JavaScript代码来显示...
1. **拼音转换**：使用JavaScript或其他编程语言的库，将下拉列表中的每个选项文本转换为拼音。确保处理好多音字和特殊字符，如“的地得”等。 2. **首字母提取**：从每个选项的拼音中提取首字母，创建一个简写字符...
在实现这个功能时，可以使用JavaScript库如jQuery或React等，配合AJAX技术进行异步数据交互，提高搜索速度。同时，可能还需要引入模糊匹配算法，如Levenshtein距离或Jaccard相似度等，使得用户输入的部分拼音或汉字...
6. **DOM操作**：使用JavaScript操作DOM，清空市（县）下拉列表，然后根据返回的数据添加新的选项。 7. **最后的联动**：当市（县）下拉列表更新完成后，可以继续监听其`change`事件，以便在用户选择市（县）后，...
"C#可输入的下拉列表框"是一种交互式控件，它结合了传统的下拉列表功能和文本输入框的功能，允许用户既可以从中选择已有的选项，也可以自由输入新的值。这种控件在提高用户体验和数据输入灵活性方面起到了重要作用。...
利用Javascript技术实现省市下拉列表的联动。
在网页开发中，"js带搜索框的下拉列表"是一种常见的交互元素，它结合了传统的下拉选择框和搜索功能，使得用户在大量选项中快速找到目标变得更加方便。这种功能通常用于提供筛选或者过滤选项，特别是在选项数量较多时...
通过上述的方法，开发者可以解决select下拉列表在不同浏览器下默认样式不一致的问题，并通过JavaScript为用户提供更加美观和友好的交互体验。同时，使用这种方法也可以增强select的功能，比如添加搜索功能，支持多选...
"jq下拉列表特效.zip"这个压缩包包含了8种不同的下拉列表js插件，这些插件可以为你的网站添加独特的视觉效果。 1. **jQuery**: jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax...
下面将详细解释如何使用JavaScript来创建省市区的下拉列表，以及相关的知识点。 首先，我们需要理解JavaScript的基本概念。JavaScript是一种轻量级的、解释型的编程语言，主要用于网页和网络应用的客户端脚本。它...
前端部分，我们可以使用jQuery或者更现代的库如Vue.js、React或Angular来监听省份下拉列表的改变事件。当用户选择新的省份时，向后台发送AJAX请求，获取城市数据并更新城市下拉列表。例如，使用jQuery实现： ```...
js 实现 从一个下拉列表往另一个下拉列表添加内容! 值得下载看看!资源免费,大家分享!!
JavaScript动态级联下拉列表框是一种常见的前端交互设计，它允许用户在选择一个选项后，根据选择的结果动态更新下一个下拉列表框的内容。这种技术在数据筛选、表单填写等场景中广泛应用，能够提高用户体验，减少不必...