当前位置：文档之家 › js实现select二级联动下拉菜单

js实现select二级联动下拉菜单

  • 格式：pdf
  • 大小：80.75 KB
  • 文档页数：2

js实现select⼆级联动下拉菜单

本⽂实例为⼤家分享了js实现select⼆级联动下拉菜单，供⼤家参考，具体内容如下

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

New Document

这段代码⽐较简单。

如果对js不⼤熟悉，可以看看下⾯关于js处理select对象的内容：

1、使⽤selectedIndex属性获取当前选项的索引

下拉框的选项是⼀个线性数组，每个选项都有⼀个索引，selectedIndex表⽰当前被选中的选项的索引号。结合options属性，

可以得到被选中的option对象，从⽽对其做进⼀步的处理。当下拉框可多选时，selectedIndex属性返回第⼀个被选中的索引。selectedIndex是个只读的属性，想把通过索引指定的下拉框的项设置为选中状态，可以设置option对象的selected=true来实

现。

2、为select对象添加⼀个选项

sltCity[i+1]=new Option(provinceCity[i],provinceCity[i]);

new Option(provinceCity[i],provinceCity[i])表⽰创建⼀个值为provinceCity[i]，⽂本为provinceCity[i]的option对象，sltCity是页

⾯上的city对象，i+1指定新添选项的位置。

3、清空⼀个select对象

要将下拉框的所有选项删除有两种⽅法，

第⼀种⽅法就是遍历删除：

var l=myselect.length;

for(var i=0;i

myselect.options[i]=null;

}

第⼆种⽅法⽐较简单，因此⼀般都使⽤此⽅法：

myselect.length=0;

以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

合集下载

javascript实现下拉提示选择框

javascript实现下拉提示选择框

javascript实现下拉提⽰选择框

本⽂介绍了select和sugget结合起来使⽤的例⼦，⽀持下拉的直接选择，也⽀持在下拉内容中输⼊过滤。整体效果就是下⾯这样的：

1、⾸先需要引⼊如下⽂件

这⾥要注意jquery要放在select2的前⾯。

2、⼀些实例

Document

Alaska

Hawaii

请选择

California1111111111111111111111111111111111111111111111111

Nevada

Oregon

Washington

Arizona

Colorado

Idaho

Montana

Nebraska

New Mexico

North Dakota

Utah

Wyoming

Alabama

Arkansas

Illinois

Iowa

Kansas

Kentucky

Louisiana

Minnesota

Mississippi

Missouri

Oklahoma

South Dakota

Texas

Tennessee

Wisconsin

Connecticut

Delaware

Florida

Georgia

Indiana

Maine

Maryland

Massachusetts

Michigan

New Hampshire

New Jersey

New York

North Carolina

Ohio

Pennsylvania

Rhode Island

South Carolina

Vermont

Virginia

West Virginia

Alaska

Hawaii

请选择

California1111111111111111111111111111111111111111111111111

JS实现的简单下拉框联动功能示例

JS实现的简单下拉框联动功能示例

JS实现的简单下拉框联动功能⽰例

本⽂实例讲述了JS实现的简单下拉框联动功能。分享给⼤家供⼤家参考，具体如下：

JS下拉联动

en

zh

使⽤innerHTML，IE浏览器不⽀持这种⽅法的，所以改进⽅法：

JS下拉联动

en

zh

可以兼容⽕狐，IE等

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》、《》及《》

希望本⽂所述对⼤家JavaScript程序设计有所帮助。

Select2.js下拉框使用小结

Select2.js下拉框使用小结

Select2.js下拉框使⽤⼩结

⽤了这么久的Select2插件，也该写篇⽂章总结总结。当初感觉Select2不是特别好⽤，但⼜找不到⽐它更好的下拉框插件。

在我的印象⾥Select2有2个版本，最新版本有⼀些新的特性，并且更新了⼀下⽅法参数，⽐最初版本要好看⼀些，本⽂针对新

版本。演⽰：

由于博客系统的原因，所以只能演⽰简单的功能。

⼀.⽂件需要引⼊select2.full.js、select2.min.css（4.0.1版本）和jquery.1.8.3及以上

最新版本的select2如果引⽤的jquery版本较低的话，某些功能⽆法正常使⽤。⽐如：清除功能allowClear: true

最新版本请使⽤标签（对于本地化的数据你可以使⽤input，但ajax远程数据必须使⽤select）

⼆.placeholder

placeholder占位提⽰⽂字，如果需要清楚功能，则必须设置placeholder。

三.加载本地数据

select2默认的数据属性是id、text，新版本可以⾃定义，但还是⽤默认的⽐较好。所以提供的json中最好转换为id、text形式，

当然可以添加其他属性。

var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];

$("#c01-select").select2({

data: data,

placeholder:'请选择',

allowClear:true

})

四.加载远程数据

$("#c01-select").select2({

ajax: {

url: "data.json",

dataType: 'json',

delay: 250,

data: function (params) {

JS中Select下拉列表类（支持输入模糊查询）功能

JS中Select下拉列表类（支持输入模糊查询）功能

JS中Select下拉列表类（⽀持输⼊模糊查询）功能

下⾯给⼤家分享⼀段代码关于select下拉列表类⽀持输⼊模糊查询功能的实现代码，具体代码如下所⽰：

可输⼊的下拉框

Section

ALL

0TEST1 = Testing 1

0TEST2 = Testing 1

0TEST3 = Testing 1

SECTION = Section Description XXXXX AAA

以上所述是⼩编给⼤家介绍的JS中Select下拉列表类(⽀持输⼊模糊查询)功能，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时

回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！