JS特效-N级的联动Select下拉框

js|select|特效|下拉

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>小灰</title></head><body><form name="form1" method="post"><select id="s1" name="s1"></select><select id="s2" name="s2"></select><select id="s3" name="s3"></select><select id="s4" name="s4"></select></form><script language="JavaScript"><!--function LianDong(arr, sel){ var me = this; this.$ = function(o) { return document.getElementById(o); } this.sub = function (i, pid) { for (var j=i+1; j<sel.length; j++) { me.$(sel[j]).length = 0; me.$(sel[j]).options[0] = new Option("请选择", ""); } for ( var j = 0; j < arr.length; j++) { if (arr[j][1] == pid) { me.$(sel[i+1]).options[me.$(sel[i+1]).length] = new Option(arr[j][2], arr[j][0]); } } } this.init = function() { me.sub(-1,"root"); for (var i=0; i<sel.length-1; i++) { me.$(sel[i]).onchange = function() { var i; for (i=0; me.$(sel[i])!=this; i++); me.sub(i, me.$(sel[i]).value); } } } this.init();}var array=new Array();array[0]=new Array("华南地区","root","华南地区");array[1]=new Array("华北地区","root","华北地区");array[2]=new Array("上海","华南地区","上海");array[3]=new Array("广东","华南地区","广东");array[4]=new Array("徐家汇","上海","徐家汇");array[5]=new Array("普托","上海","普托");array[6]=new Array("广州","广东","广州");array[7]=new Array("湛江","广东","湛江");array[8]=new Array("湛江1","湛江","湛江1");array[9]=new Array("湛江2","湛江","湛江2");array[10]=new Array("广州1","广州","广州1");array[11]=new Array("广州2","广州","广州2");var select = new Array("s1","s2","s3","s4");var liandong=new LianDong(array, select)//--></script></body></html>

    [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

时间: 2024-10-01 16:56:57

JS特效-N级的联动Select下拉框的相关文章

学习JS的作品-----N级的联动Select下拉框

js|select|下拉 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv=&quo

jQuery制作简洁的多级联动Select下拉框_jquery

今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这个Select下拉框也可以绑定下拉事件,并获取当前选中项的值. html代码: 复制代码 代码如下:  <div class="wrap">         <div class="nice-select" name="nice-select

JS实现的5级联动Select下拉选择框实例_javascript技巧

本文实例讲述了JS实现的5级联动Select下拉选择框.分享给大家供大家参考.具体如下: 这是一个基于JS的5级联动Select下拉选择框,这里演示的仅是一个示例,没有做汉化,当初从老外网站扒下时花了很多时间,当然我们平时用时候可能不需要这么多级,意在介绍一种编写方法和思路,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-5-option-codes/ 具体代码如下: <title>一个基于JS的5级联动Se

js自定义select下拉框美化特效_javascript技巧

select的默认样式往往很丑,为保证页面样式风格统一,需要对select进行美化.虽然其美化的插件很多,一搜一大把,但是需要引入长长的css文件和js文件实在是件头痛的事.其实select的实现原理很简单,就是一个点击 切换 显示和隐藏 并传值 的过程.用jquery模拟了,样式想怎么写就怎么写,且不限数量. 朴素的效果: html: <div class="select_box"> <font>›</font> <span>选项1&l

js问题-js 移除select下拉框里的onchange 事件如何实现,求大神解答

问题描述 js 移除select下拉框里的onchange 事件如何实现,求大神解答 js 移除select下拉框里的onchange 事件如何实现,求大神解答 解决方案 为什么非得要去掉,函数里不写任何代码不就得了了.. 解决方案二: 不写不就行了吗??具体的说下.... 解决方案三: 我select下拉框里有个onchange事件来实现联动功能,但是我在某些情况下不希望发生联动,所以想特定的时候不执行onchange事件 解决方案四: $('#btn').unbind("click"

jquery实现select下拉框美化特效代码分享_javascript技巧

这是一款基于jquery实现select下拉框美化特效代码,用户可以选择下拉菜单内容,是一款非常实用的特效源码.  为大家分享的jquery实现select下拉框美化特效代码如下 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/g.css" type="text/css&

js获取select下拉框的值

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-

js实现Select下拉框具有输入功能的方法

 这篇文章主要介绍了js实现Select下拉框具有输入功能的方法,实例分析了两种比较常见的实现方法,是非常实用的技巧,需要的朋友可以参考下     本文实例讲述了js实现Select下拉框具有输入功能的方法.分享给大家供大家参考.具体实现方法如下: 实现方法一 代码如下: <HTML> <HEAD> <META http-equiv='Content-Type' content='text/html; charset=gb2312'> <TITLE>js实现

js实现Select下拉框具有输入功能的方法_javascript技巧

本文实例讲述了js实现Select下拉框具有输入功能的方法.分享给大家供大家参考.具体实现方法如下: 实现方法一 复制代码 代码如下: <HTML> <HEAD> <META http-equiv='Content-Type' content='text/html; charset=gb2312'> <TITLE>js实现可输入的下拉框</TITLE> </HEAD> <BODY> <div style="