动态获取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>
相关推荐
在某些场景下,我们需要动态地填充select下拉框的选项值,以实现更灵活的数据输入。本篇文章将详细探讨如何在jQGrid中实现这一功能。 首先,理解`select`下拉框的基本概念。在HTML中,`<select>`元素用于创建一个...
这就是"select下拉框添加搜索功能"这个知识点的核心所在。 在`select`下拉框中实现搜索功能,一般有两种常见方法:一种是原生HTML和JavaScript的实现,另一种是借助第三方库,如本例中的`jquery.editable-select`。...
综上所述,"select下拉框可以多选"涉及到HTML、CSS、JavaScript基础,以及可能的库和插件的使用,还有无障碍性设计。掌握这些知识点能帮助开发者创建功能丰富、用户体验良好的多选下拉框。在压缩包文件中的"select...
动态加载select下拉框数据不仅适用于Web应用,也适用于移动应用。它有助于减少网络带宽消耗,加快页面响应速度,并允许用户更快地找到他们想要的选项,是现代Web开发中不可或缺的一个技巧。了解和掌握这项技术对于...
### JavaScript 操作 Select 下拉框的关键知识点 在 Web 开发中,`<select>` 元素用于创建下拉列表(或选择框)。这些选择框在用户界面中非常常见,可以用来收集用户输入的信息,比如让用户从一系列选项中选择一个...
js+ajax 实现select下拉框无限级动态添加,代码简洁方便,哥想了很久才做出来的,欢迎使用
`<select>`元素是网页表单中用于创建下拉列表的关键部分,而通过JavaScript,我们可以动态地添加、删除、移动选项,甚至调整它们的位置,从而增强用户体验和功能灵活性。 ### 一、添加`<option>`至`<select>` ####...
`jQuery select下拉框美化代码`这个压缩包的实现可能还包含了其他细节,如防止多次点击导致的闪烁,以及在鼠标移出下拉框时自动隐藏内容等功能。这种美化代码对于提升网站的用户体验和专业感具有积极意义,特别是...
然后,我们可以将普通的`<select>`元素转换为Bootstrap Select,只需添加`class="selectpicker"`属性: ```html <select class="selectpicker"> 北京 上海 广州 <!-- ... --> </select> ``` 接下来,为了实现...
/* 隐藏所有选项,用JS动态控制 */ } .selectBox option.active { background-color: #f0f0f0; } .no-results { display: none; } /* 当无搜索结果时显示提示 */ .no-results.show { display: block; text-...
在实现仿select下拉框时,通常会使用JavaScript库或框架,如jQuery、React、Vue等,结合CSS预处理器(如Sass、Less)来编写代码。例如,`select_menu`可能是一个包含这些实现的示例项目,其中可能包含HTML模板、CSS...
本知识点聚焦于"80、jquery select下拉框美化代码",主要讨论如何使用jQuery来美化HTML中的select元素,以提升用户界面的视觉效果和用户体验。 传统的HTML select元素在不同浏览器中的样式表现不一,且通常缺乏...
JSON(JavaScript Object Notation)和Select元素在网页开发中经常被用来构建动态的、交互式的用户界面,特别是在处理级联下拉框时。级联下拉框是指一个下拉框的选择会影响另一个下拉框的选项,这样的设计可以提高...
一个简单的多选下拉框可以通过在`<select>`标签中添加`multiple`属性来创建: ```html <select multiple> <option value="option1">Option 1 <option value="option2">Option 2 <option value="option3">Option ...
在"select下拉框可编辑输入框"的设计中,CSS起到了至关重要的作用,主要体现在以下几个方面: 1. **样式定制**:通过CSS,我们可以定制下拉框的外观,如边框、背景色、字体样式等,使其与网页的整体设计风格保持...
在网页设计中,为了提供更好的用户体验和视觉效果,开发者经常需要对HTML元素进行自定义和美化,特别是像`<select>`这样的下拉框。本文将详细介绍如何使用jQuery和HTML来创建自定义的下拉框,并对其进行美化和优化。...
在压缩包`dist`文件夹中,通常包含了layui的CSS和JS文件,以及可能的示例代码和文档,你可以参考这些资源来深入了解和使用layui的`select`下拉框插件。 总的来说,layui的`select`下拉框插件提供了一种优雅的方式来...
这时,我们就需要利用JavaScript库,比如jQuery,来对select下拉框进行美化,提升用户体验。 jQuery是一个轻量级、功能丰富的JavaScript库,它简化了DOM操作、事件处理、动画效果以及Ajax交互。在美化select下拉框...