`
0kd07
  • 浏览: 20203 次
  • 性别: Icon_minigender_1
  • 来自: 廊坊
社区版块
存档分类
最新评论

JS动态逐级添加select下拉框

    博客分类:
  • js
阅读更多
动态获取select中的options数量:
        Var size = document.getElementById("ddlResourceType").options.length;

动态删除select中的所有options:
       document.getElementById("ddlResourceType").options.length=0;

动态删除select中的某一项option:
       document.getElementById("ddlResourceType").options.remove(indx); 

动态添加select中的项option:
document.getElementById("ddlResourceType").options.add(new Option(text,value));

上面在IE和FireFox都能测试成功,希望以后你可以用上。


其实用标准的DOM操作也可以,就是document.createElement,appendChild,removeChild之类的。

取值方面
    function getvalue(obj)
    {
        var m=obj.options[obj.selectedIndex].value
        alert(m);//获取value
        var n=obj.options[obj.selectedIndex].text
        alert(n);//获取文本
    }

==============================================================================
1 检测是否有选中
if (objSelect.selectedIndex > - 1 ) {
// 说明选中
} else {
// 说明没有选中
}

将option设为选中:document.getElementById("province").options.selected = true;

2 删除被选中的项
objSelect.options[objSelect.selectedIndex] = null ;

3 增加项
objSelect.options[objSelect.length] = new Option( " 你好 " , " hello " );

4 修改所选择中的项
objSelect.options[objSelect.selectedIndex] = new Option( " 你好 " , " hello " );

5 得到所选择项的文本
objSelect.options[objSelect.selectedIndex].text;

6 得到所选择项的值

objSelect.options[objSelect.selectedIndex].value;

7.所选择项设置为选中
objSelect.options[objSelect.selectedIndex].selected = true;



例子:代码 
1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
2."http://www.w3.org/TR/html4/loose.dtd">  
3.<html>  
4.<head>  
5.<meta http-equiv="Content-Type" content="text/html; charset=gb2312">  
6.<title>城市区域4级下拉框</title>  
7.<script>  
8.    function f1(v){  
9.        //alert(v);  
10.        //清除后面的项  
11.        document.getElementById("object2").options.length=0 
12.        document.getElementById("object3").options.length=0 
13.        document.getElementById("object2").style.display="none";  
14.        document.getElementById("object3").style.display="none";  
15.          
16.          
17.        var s  =  document.getElementById("object1");     
18.        if(v=="北京"){  
19.            var option0  =   new  Option("东城区","a1");  
20.            var option1  =   new  Option("西城区","a2");  
21.            var option2  =   new  Option("朝阳区","a3");  
22.            s.options[0] = option0;  
23.            s.options[1] = option1;  
24.            s.options[2] = option2;  
25.        }else if(v=="上海"){  
26.            var option0  =   new  Option("浦东新区","b1");  
27.            var option1  =   new  Option("闵行区","b2");  
28.            var option2  =   new  Option("徐汇区","b3");  
29.            s.options[0] = option0;  
30.            s.options[1] = option1;  
31.            s.options[2] = option2;  
32.            s.options[2].selected = true;  
33.              
34.        }else if(v=="广州"){  
35.            var option0  =   new  Option("天河区","c1");  
36.            var option1  =   new  Option("越秀区","c2");  
37.            var option2  =   new  Option("海珠区","c3");  
38.            s.options[0] = option0;  
39.            s.options[1] = option1;  
40.            s.options[2] = option2;  
41.        }  
42.        //显示出来  
43.        document.getElementById("object1").style.display="";  
44.    }  
45.      
46.    function f2(v){  
47.        //alert(v);  
48.        //清除后面的项  
49.        document.getElementById("object3").options.length=0 
50.        document.getElementById("object3").style.display="none";  
51.          
52.        var s  =  document.getElementById("object2");     
53.        if(v=="b1"){  
54.            var option0  =   new  Option("陆家嘴","a1");  
55.            var option1  =   new  Option("东方明珠","a2");  
56.            s.options[0] = option0;  
57.            s.options[1] = option1;  
58.        }else if(v=="b2"){  
59.            var option0  =   new  Option("浦江镇","b1");  
60.            var option1  =   new  Option("梅陇镇","b2");  
61.            s.options[0] = option0;  
62.            s.options[1] = option1;  
63.        }else if(v=="b3"){  
64.            var option0  =   new  Option("田林镇","c1");  
65.            var option1  =   new  Option("徐家汇","c2");  
66.            s.options[0] = option0;  
67.            s.options[1] = option1;  
68.        }  
69.        //显示出来  
70.        document.getElementById("object2").style.display="";  
71.    }  
72.      
73.    function f3(v){  
74.        //alert(v);  
75.        var s  =  document.getElementById("object3");     
76.        if(v=="c1"){  
77.            var option0  =   new  Option("田林路","a1");  
78.            var option1  =   new  Option("漕宝路","a2");  
79.            s.options[0] = option0;  
80.            s.options[1] = option1;  
81.        }else if(v=="c2"){  
82.            var option0  =   new  Option("肇嘉浜路","b1");  
83.            var option1  =   new  Option("华山路","b2");  
84.            s.options[0] = option0;  
85.            s.options[1] = option1;  
86.        }  
87.        //显示出来  
88.        document.getElementById("object3").style.display="";  
89.    }  
90.</script>  
91.</head>  
92. 
93.<body>  
94.<select name="select1" onChange="f1(this.value);">  
95.<option value="北京">北京</option>  
96.<option value="上海">上海</option>  
97.<option value="广州">广州</option>  
98.</select>  
99.<select id="object1" name="select2" onChange="f2(this.value);" style="display:none ">  
100.</select>  
101.<select id="object2" name="select3" onChange="f3(this.value);" style="display:none ">  
102.</select>  
103.<select id="object3" name="select4" style="display:none ">  
104.</select>  
105.</body>  
106.</html> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>城市区域4级下拉框</title>
<script>
function f1(v){
//alert(v);
//清除后面的项
document.getElementById("object2").options.length=0
document.getElementById("object3").options.length=0
document.getElementById("object2").style.display="none";
document.getElementById("object3").style.display="none";


var s  =  document.getElementById("object1");  
if(v=="北京"){
var option0  =   new  Option("东城区","a1");
var option1  =   new  Option("西城区","a2");
var option2  =   new  Option("朝阳区","a3");
s.options[0] = option0;
s.options[1] = option1;
s.options[2] = option2;
}else if(v=="上海"){
var option0  =   new  Option("浦东新区","b1");
var option1  =   new  Option("闵行区","b2");
var option2  =   new  Option("徐汇区","b3");
s.options[0] = option0;
s.options[1] = option1;
s.options[2] = option2;
s.options[2].selected = true;

}else if(v=="广州"){
var option0  =   new  Option("天河区","c1");
var option1  =   new  Option("越秀区","c2");
var option2  =   new  Option("海珠区","c3");
s.options[0] = option0;
s.options[1] = option1;
s.options[2] = option2;
}
//显示出来
document.getElementById("object1").style.display="";
}

function f2(v){
//alert(v);
//清除后面的项
document.getElementById("object3").options.length=0
document.getElementById("object3").style.display="none";

var s  =  document.getElementById("object2");  
if(v=="b1"){
var option0  =   new  Option("陆家嘴","a1");
var option1  =   new  Option("东方明珠","a2");
s.options[0] = option0;
s.options[1] = option1;
}else if(v=="b2"){
var option0  =   new  Option("浦江镇","b1");
var option1  =   new  Option("梅陇镇","b2");
s.options[0] = option0;
s.options[1] = option1;
}else if(v=="b3"){
var option0  =   new  Option("田林镇","c1");
var option1  =   new  Option("徐家汇","c2");
s.options[0] = option0;
s.options[1] = option1;
}
//显示出来
document.getElementById("object2").style.display="";
}

function f3(v){
//alert(v);
var s  =  document.getElementById("object3");  
if(v=="c1"){
var option0  =   new  Option("田林路","a1");
var option1  =   new  Option("漕宝路","a2");
s.options[0] = option0;
s.options[1] = option1;
}else if(v=="c2"){
var option0  =   new  Option("肇嘉浜路","b1");
var option1  =   new  Option("华山路","b2");
s.options[0] = option0;
s.options[1] = option1;
}
//显示出来
document.getElementById("object3").style.display="";
}
</script>
</head>

<body>
<select name="select1" onChange="f1(this.value);">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
</select>
<select id="object1" name="select2" onChange="f2(this.value);" style="display:none ">
</select>
<select id="object2" name="select3" onChange="f3(this.value);" style="display:none ">
</select>
<select id="object3" name="select4" style="display:none ">
</select>
</body>
</html>


分享到:
评论

相关推荐

    jQuery Select下拉框无限级联菜单.rar

    在本案例中,我们讨论的是利用jQuery实现的一个无限级联菜单,它特别适用于Select下拉框形式的导航菜单。这个功能的亮点在于其无限级联的特性,即菜单可以无限制地扩展,同时无需依赖外部的Ajax请求,所有的数据都...

    bootstrap树形下拉框 下拉框树形菜单(花了一小时修改过的)

    在Bootstrap中,树形下拉框主要依赖于`bootstrap-treeview.js`这个JavaScript插件,它扩展了Bootstrap的基础组件,为下拉菜单添加了树状节点的功能。以下是对这个组件的关键知识点的详细解释: 1. **Bootstrap ...

    asp 4级动态下拉框

    4. 动态生成下拉框:根据查询结果,使用JavaScript动态创建`&lt;option&gt;`元素,并添加到对应的`&lt;select&gt;`元素中。 5. 递归处理:为了实现4级下拉,这个过程需要递归进行,直到达到最后一级。每次用户选择一个选项,都...

    简洁的jQuery下拉框城市选择插件

    在这款插件中,jQuery被用来动态地创建和管理下拉框中的城市选项,使用户能够流畅地进行选择。通过使用jQuery,开发者可以避免编写大量的原生JavaScript代码,提高代码的可读性和维护性。 下拉框作为HTML中的...

    C#编写的一个带树型结构的下拉框控件

    通过这种方式,用户可以逐级展开节点,找到他们需要的特定选项,而不是在单一的列表中滚动寻找。 创建这样的控件需要对C# WinForms控件编程有深入理解,包括自定义控件的绘制、事件处理以及数据绑定。控件的核心...

    jQuery无限层级下拉框

    1. **jQuery的AJAX请求**:在实现无限层级下拉框时,通过AJAX(Asynchronous JavaScript and XML)请求动态获取下拉菜单的数据。这使得用户在选择一个选项时,无需刷新整个页面就能加载下一级菜单,提高了用户体验。...

    基于Layui+form组件的省市区级联下拉框选择.zip

    为了实现联动效果,这三个下拉框的初始选项应该为空,动态加载数据将在JavaScript中完成。 `area.js`是实现级联下拉的核心脚本文件。它通常会包含获取数据、初始化下拉框和监听事件等功能。首先,我们需要从服务器...

    js下拉框三级联动菜单选择代码.zip

    JavaScript代码会监听`&lt;select&gt;`元素的`change`事件,并根据当前选中的值动态生成和更新后续级的下拉菜单选项。这可能涉及到DOM操作(如`document.getElementById`或`querySelector`来获取元素,`innerHTML`或`...

    jQuery下拉框多级菜单筛选插件.zip

    而通过使用jQuery下拉框多级菜单筛选插件,我们可以将这些选项组织成多级菜单,用户只需通过逐级选择,就能快速定位到目标选项,从而提升用户体验。 插件的实现原理主要基于以下几点: 1. **HTML结构**:首先,...

    jQuery下拉框四级联动菜单选择代码

    同时,添加菜单功能可能涉及到动态创建新的选项并插入到下拉框中。 `css`目录下的文件,如`style.css`,则用于定义界面的样式。这包括下拉框的外观、菜单项的字体、颜色、间距等。为了实现更好的用户体验,可能还会...

    el-tree-select:基于el-select和el-tree改造的树形选择器(下拉框)组件

    "el-tree-select:基于el-select和el-tree改造的树形选择器(下拉框)组件"是一个自定义的前端UI组件,它结合了Element UI库中的el-select和el-tree两个组件的功能,创建了一个适用于数据层级关系展示的选择器。...

    javascipt无限级可排序下拉框的实现

    用户可以通过展开下拉框逐级浏览并选择所需项。 实现无限级可排序下拉框的关键在于数据结构的设计和遍历方式的选择。一种常见的方式是使用JSON对象来表示层级关系,每个对象代表一个菜单项,包含自身的值、文本以及...

    ASP四级联动下拉框代码

    在ASP中,四级联动下拉框是一种常见的交互设计,常见于网站的地区选择、分类导航等场景,它允许用户通过四个下拉菜单逐级选择,形成一个完整的选项路径。这种设计可以有效地组织大量数据,提供清晰的导航结构。 四...

    ul li 模拟省市区下拉框

    - 通过JavaScript动态添加类名或改变样式属性,实现选中状态的反馈。 5. **交互优化**: - 添加键盘导航支持,让用户可以通过上下键选择选项,增强无障碍访问性。 - 考虑到移动设备,可以添加触摸滑动效果,使...

    动态联级菜单js文件

    在IT行业中,动态联级菜单是一种常见的用户界面元素,它允许用户通过逐级展开的方式选择一个或多个层次的选项。这种交互方式常用于网站的导航、数据筛选或配置设置等场景。本文将深入探讨动态联级菜单的概念,以及...

    JS年月日三级联动下拉框日期选择特效代码

    "JS年月日三级联动下拉框日期选择特效代码" 提供了一种实现方式,它通过JavaScript(JS)来创建一个包含年、月、日的三级下拉菜单,用户可以逐级选择,形成一个完整的日期。这种设计既简洁又直观,特别适用于那些...

    select tree 简单实用-下拉树

    在IT行业中,"select tree"通常指的是在用户界面中用于展示层级关系数据的一种控件,它结合了下拉框和树形结构的特点,使得用户能够更直观地选择和浏览层次结构的数据。这篇博客"select tree 简单实用-下拉树"可能...

    selectorjs-gh-pages地址三级联动.zip

    给每个`&lt;select&gt;`添加唯一的ID,以便在JavaScript中引用。 3. **初始化插件**:在页面加载完成后,调用`SelectorJS.area.init()`来初始化插件。这一步可能需要传递一些配置参数,比如数据源、默认值等。 4. **数据...

    淘宝javascript类别多级下拉连动解析和改进

    当用户在一个`&lt;select&gt;`中选择一个选项时,JavaScript会监听这个事件,根据选择的值动态生成或更新下一个`&lt;select&gt;`的内容。CSS则用于样式化这些下拉菜单,以提供良好的用户体验。 在淘宝的实现中,可能会使用到...

Global site tag (gtag.js) - Google Analytics