今天写了一个简单的js二级联动，作用是根据第一个select组件的option选项自动生成第二个select组件的option选项。写的比较简单。有什么不足之处大家多多指教。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<script type="text/javascript">
window.onload=function(){
var s1=document.getElementById("s1");
doubleSel(s1);
s1.onchange=function(){
doubleSel(s1);
}
}
function doubleSel(obj){
removeOptions();
var target=document.getElementById("s2");
if(obj.value=="A"){
var option1=document.createElement("option");
option1.innerHTML="1";
var option2=document.createElement("option");
option2.innerHTML="2";
target.appendChild(option1);
target.appendChild(option2);
}else if(obj.value=="B"){
var option1=document.createElement("option");
option1.innerHTML="3";
var option2=document.createElement("option");
option2.innerHTML="4";
target.appendChild(option1);
target.appendChild(option2);
}else if(obj.value=="C"){
var option1=document.createElement("option");
option1.innerHTML="5";
var option2=document.createElement("option");
option2.innerHTML="6";
target.appendChild(option1);
target.appendChild(option2);
}else{
}
}
function removeOptions(){
var target=document.getElementById("s2");
var to=target.childNodes;
var length=to.length;
for(i=0;i<length;i++){
target.removeChild(to[0]);
}
}
</script>
<BODY>
<select id="s1">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
<select id="s2"></select>
</BODY>
</HTML>
分享到：
相关推荐
javascript二级联动表单javascript二级联动表单javascript二级联动表单javascript二级联动表单javascript二级联动表单javascript二级联动表单javascript二级联动表单javascript二级联动表单
总之，“js二级联动_精简实用版”是一个适用于快速实现省市级联功能的解决方案，它结合了JavaScript的基本概念和实际应用场景，是提升用户体验的一个有效工具。对于想要学习或使用这一功能的开发者来说，这是一个很...
JavaScript二级联动菜单是一种常见的网页交互设计，用于提供更精细化的导航或数据筛选。在电子商务网站、行政管理系统等中，我们经常可以看到这种菜单形式，它能够根据用户在一级菜单中的选择，动态加载并显示相应的...
javascript 二级联动菜单
在这个案例中，我们关注的是"js 二级联动"，这涉及到JavaScript的基础知识，如DOM操作、事件监听以及数据结构的处理。 首先，"ckcity.js"可能是实现二级联动功能的核心脚本文件。在这个文件中，开发者可能会定义一...
js 二级联动菜单 路过的高手指点，低手分享js 二级联动菜单 路过的高手指点，低手分享
在本案例中，"js二级联动菜单"是指利用JavaScript实现的一种下拉菜单功能，这种菜单通常出现在网站导航中，当用户选择一级菜单时，相关的二级菜单会自动展开，提供更具体的选项。 一级和二级联动菜单的实现主要涉及...
标题中的“省市二级联动代码JS”指的是在网页开发中实现的一种交互功能，它允许用户在选择省份后，自动更新下拉菜单以显示对应省份的城市，从而实现两级联动的效果。这种功能通常用于地址输入或者区域筛选等场景，...
总结来说，这个“单文件html+js二级联动完整示例”展示了如何利用纯JavaScript实现不依赖第三方库的二级联动效果，以及如何在页面加载时设置默认选中项。这个示例对于初学者理解和实践Web交互逻辑很有帮助，同时也...
本文实例为大家分享了js实现select二级联动下拉菜单，供大家参考，具体内容如下 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath()...
二级联动 js html 简单的二级联动
压缩包中的"js省市区三级联动.rar"和"Js省市二级联动.rar"文件可能包含了实现这些功能的示例代码，可以下载后参考学习。通过理解并实践这些代码，你可以更好地掌握JS在构建省市区联动菜单方面的技巧。
根据给定的信息，我们可以提取并总结出关于“JavaScript 二级联动下拉列表”的知识点： ### 一、二级联动下拉列表概述 二级联动下拉列表是一种常见的网页交互设计模式，通常用于显示具有层级关系的数据。当用户在...
本示例中，我们关注的是“js实现的二级菜单联动”，特别是省市联动的应用。省市联动意味着当用户在一级菜单（省份）中选择一个选项时，二级菜单（城市）会动态更新显示与所选省份相关联的城市列表。这种功能可以极大...
javascript实现二级的省份城市联动。 var aprovince = [ ["--请选择省份--"], ["北京"], ["上海"], ["广东"], ["湖南"] ]; var acity = [ ["--请选择城市--"], ["东城区","西城区","南城区","北城区"], [...
省市二级联动js代码
省市二级联动JS代码是一种常见的前端开发技术，常用于创建具有交互性的网页表单，特别是当用户需要选择地理位置信息时。这种技术使得用户在选择省份后，下拉菜单会自动更新为对应省份的城市列表，提供了良好的用户...
在IT行业中，"省市js二级联动"是一种常见的前端交互功能，尤其在网页表单设计时，用于用户选择省市区信息。这种功能通过JavaScript实现，能够根据用户选择的省份动态加载对应的市区列表，提供了良好的用户体验。下面...
在ASP中，二级联动和三级联动下拉框是常见的功能，通常用于实现数据的筛选和过滤，例如在地区选择、商品分类等场景。下面将详细讲解如何在ASP中实现这些功能。 ### 二级联动下拉框 二级联动下拉框是指两个下拉框...