动态获取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;
<!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>
相关推荐
js+ajax 实现select下拉框无限级动态添加,代码简洁方便,哥想了很久才做出来的,欢迎使用
主要为大家详细介绍了JS Select下拉框的相关资料,支持输入模糊查询,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Q694264 C# ajax读取后台接口,填充给select下拉框 https://ask.csdn.net/questions/694264
主要介绍了JavaScript实现将数组数据添加到Select下拉框的方法,涉及javascript数组操作及页面元素动态赋值的相关技巧,需要的朋友可以参考下
使用thinkphp框架做出的一个简单的ajax实现的无限添加级联下拉框的例子,ajax写的还可以,比价清晰
Js Select下拉框级联菜单,一共支持5级联动,相信够用了,这种菜单不用多介绍吧,后一级的值与前一级是父、子关系,该示例还演示了动态添加菜单、减少菜单的功能,还有显示/不显示空值的功能,如演示截图所示。
主要介绍了js实现下拉框选择要显示图片的方法,涉及针对js操作select的技巧,非常具有实用价值,需要的朋友可以参考下
下拉框(select),可以多选,带有分组搜索功能
主要介绍了JavaScript实现向select下拉框中添加和删除元素的方法,涉及jQuery中append()与remove()方法动态操作表单元素的相关技巧,需要的朋友可以参考下
Select下拉框的问题,想在选择一个选项后,前台显示做出变动,并且知道选择的是第几个选项。 这个很好解决: 如下: <select class=form-control onchange=selectOnchang(this)> 所有申请商家 待审核商家...
Segment.js是一款能够将任何select元素转化为苹果IOS样式的分段按钮的jQuery插件。在苹果设备流行的今天,在你的网页中添加一些IOS样式的按钮,可以使你的页面显得更加时尚。
动态创建及删除select、添加及删除选项option、获得选项option的值、获得选项option的文本等等,感兴趣的朋友可以参考下哈
自写的一个能进行 模糊查询+多选的下拉框(select) 本人亲测,肯定符合你的要求
(解决,在输入框上添加onkeyup时间触发的函数用js获得) 4. 如何匹配?(解决) 4.1 如何获得所有option中的内容?(解决) 代码如下: function getSelectText() { //获得所有select标签 var object = document....
下拉的select框中添加一个搜索框,在select 框中添加新的样式searchClass,就可以使用
基于Jquery的自定义下拉框JS插件。 带图标、分组等
Select-or-Die是一款基于jQuery的下拉框美化插件,你不用修改你原来的下拉框,它能够完全无缝的对你原来的下拉框进行美化,它甚至还支持添加前缀、HTML data 属性、键盘循环控制、设置高度、跳转到链接以及回调函数...