简单select下拉联动代码(下拉列表联动选择表单项)
admin 发布:2022-12-19 16:44 145
今天给各位分享简单select下拉联动代码的知识,其中也会对下拉列表联动选择表单项进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!
本文目录一览:
- 1、求php JS 二级菜单(select) 联动 的代码
- 2、jQuery制作简洁的多级联动Select下拉框
- 3、select下拉菜单联动
- 4、ASP下拉列表联动代码
- 5、JSP 实现两个select下拉框的数据联动,要求根据第一个下拉式选择的内容联动第二个下拉式。需要从数据库中
- 6、html 如何做一个二级联动的下拉表单(select)
求php JS 二级菜单(select) 联动 的代码
html
head
titlephp爱好者_网页特效|--- 二级下拉关联菜单/title
meta http-equiv="Content-Type" content="text/html; charset=gb2312"
/head
body
script language="JavaScript"
!--
//二级菜单
//海娃@
var hw_selecttext ="北京|东城^西城^崇文^宣武^朝阳^丰台^石景山^海淀^门头沟^房山^通州^顺义^昌平^大兴^平谷^怀柔^密云^延庆*上海|黄浦^卢湾^徐汇^长宁^静安^普陀^闸北^虹口^杨浦^闵行^宝山^嘉定^浦东^金山^松江^青浦^南汇^奉贤^崇明*天津|和平^东丽^河东^西青^河西^津南^南开^北辰^河北^武清^红挢^塘沽^汉沽^大港^宁河^静海^宝坻^蓟县*重庆|万州^涪陵^渝中^大渡口^江北^沙坪坝^九龙坡^南岸^北碚^万盛^双挢^渝北^巴南^黔江^长寿^綦江^潼南^铜梁^大足^荣昌^壁山^梁平^城口^丰都^垫江^武隆^忠县^开县^云阳^奉节^巫山^巫溪^石柱^秀山^酉阳^彭水^江津^合川^永川^南川*河北|石家庄^邯郸^邢台^保定^张家口^承德^廊坊^唐山^秦皇岛^沧州^衡水*山西|太原^大同^阳泉^长治^晋城^朔州^吕梁^忻州^晋中^临汾^运城*内蒙古|呼和浩特^包头^乌海^赤峰^呼伦贝尔盟^阿拉善盟^哲里木盟^兴安盟^乌兰察布盟^锡林郭勒盟^巴彦淖尔盟^伊克昭盟*辽宁|沈阳^大连^鞍山^抚顺^本溪^丹东^锦州^营口^阜新^辽阳^盘锦^铁岭^朝阳^葫芦岛*吉林|长春^吉林^四平^辽源^通化^白山^松原^白城^延边*黑龙江|哈尔滨^齐齐哈尔^牡丹江^佳木斯^大庆^绥化^鹤岗^鸡西^黑河^双鸭山^伊春^七台河^大兴安岭*江苏|南京^镇江^苏州^南通^扬州^盐城^徐州^连云港^常州^无锡^宿迁^泰州^淮安*浙江|杭州^宁波^温州^嘉兴^湖州^绍兴^金华^衢州^舟山^台州^丽水*安徽|合肥^芜湖^蚌埠^马鞍山^淮北^铜陵^安庆^黄山^滁州^宿州^池州^淮南^巢湖^阜阳^六安^宣城^亳州*福建|福州^厦门^莆田^三明^泉州^漳州^南平^龙岩^宁德*江西|南昌市^景德镇^九江^鹰潭^萍乡^新馀^赣州^吉安^宜春^抚州^上饶*山东|济南^青岛^淄博^枣庄^东营^烟台^潍坊^济宁^泰安^威海^日照^莱芜^临沂^德州^聊城^滨州^菏泽*河南|郑州^开封^洛阳^平顶山^安阳^鹤壁^新乡^焦作^濮阳^许昌^漯河^三门峡^南阳^商丘^信阳^周口^驻马店^济源*湖北|武汉^宜昌^荆州^襄樊^黄石^荆门^黄冈^十堰^恩施^潜江^天门^仙桃^随州^咸宁^孝感^鄂州*湖南|长沙^常德^株洲^湘潭^衡阳^岳阳^邵阳^益阳^娄底^怀化^郴州^永州^湘西^张家界*广东|广州^深圳^珠海^汕头^东莞^中山^佛山^韶关^江门^湛江^茂名^肇庆^惠州^梅州^汕尾^河源^阳江^清远^潮州^揭阳^云浮*广西|南宁^柳州^桂林^梧州^北海^防城港^钦州^贵港^玉林^南宁地区^柳州地区^贺州^百色^河池*海南|海口^三亚*四川|成都^绵阳^德阳^自贡^攀枝花^广元^内江^乐山^南充^宜宾^广安^达川^雅安^眉山^甘孜^凉山^泸州*贵州|贵阳^六盘水^遵义^安顺^铜仁^黔西南^毕节^黔东南^黔南*云南|昆明^大理^曲靖^玉溪^昭通^楚雄^红河^文山^思茅^西双版纳^保山^德宏^丽江^怒江^迪庆^临沧*西藏|拉萨^日喀则^山南^林芝^昌都^阿里^那曲*陕西|西安^宝鸡^咸阳^铜川^渭南^延安^榆林^汉中^安康^商洛*甘肃|兰州^嘉峪关^金昌^白银^天水^酒泉^张掖^武威^定西^陇南^平凉^庆阳^临夏^甘南*宁夏|银川^石嘴山^吴忠^固原*青海|西宁^海东^海南^海北^黄南^玉树^果洛^海西*新疆|乌鲁木齐^石河子^克拉玛依^伊犁^巴音郭勒^昌吉^克孜勒苏柯尔克孜^博尔塔拉^吐鲁番^哈密^喀什^和田^阿克苏*香港|*澳门|*台湾|台北^高雄^台中^台南^屏东^南投^云林^新竹^彰化^苗栗^嘉义^花莲^桃园^宜兰^基隆^台东^金门^马祖^澎湖*其它|北美洲^南美洲^亚洲^非洲^欧洲^大洋洲"
//如果文本与值不同,请输入在文本后加上@值,如:北京@010|东城@001^西城@002
var TheSplit1 = "*" //北京与上海的分隔符
var TheSplit2 = "|" //北京与东城的分隔符
var TheSplit3 = "^" //东城与西城的分隔符
var TheSplit4 = "@" //文本与值的分隔符,可以省略
var hwallselecttext = hw_selecttext
var hwdefault_value = "山东济宁"
//默认值,在值有相同时有bug。
document.write('select name="hw_1" onChange = "hw_select()"/select select name="hw_2" onChange = "hw_select()"/select input class="input" size="15" type="input" value="'+hwdefault_value+'" name="hw"n');
var hwallselecttextarr
hwallselecttextarr = hwallselecttext.split(TheSplit1)
hwArraylength = hwallselecttextarr.length
var hwwhere = new Array(hwArraylength);
hwwhere[0]= new hw_comefrom("请选择@","请选择@");
for (var hwl=0;hwlhwArraylength;hwl++)
{
eval(hwwhere[hwl+1] = new hw_comefrom(hwallselecttextarr[hwl].split(TheSplit2)[0],hwallselecttextarr[hwl].split(TheSplit2)[1]))
}
function hw_comefrom(hwSelect_s1,hwSelect_s2) { this.hwSelect_s1 = hwSelect_s1; this.hwSelect_s2 = hwSelect_s2; }
function hw_select()
{
with(document.all.hw_1)
{
var hwSelect_s12 = options[selectedIndex].value;
}
for(hwi = 0;hwi hwwhere.length;hwi ++)
{
if (hwwhere[hwi].hwSelect_s1.indexOf(TheSplit4)!=-1)
{
var hwThisV = hwwhere[hwi].hwSelect_s1.split(TheSplit4)[1]
}
else
{
var hwThisV = hwwhere[hwi].hwSelect_s1
}
if (hwThisV == hwSelect_s12)
{
hwSelect_s13 = (hwwhere[hwi].hwSelect_s2).split(TheSplit3);
for(hwj = 0;hwj hwSelect_s13.length;hwj++)
{
with(document.all.hw_2)
{
length = hwSelect_s13.length;
if (hwSelect_s13[hwj].indexOf(TheSplit4)!=-1)
{
options[hwj].text = hwSelect_s13[hwj].split(TheSplit4)[0]
options[hwj].value = hwSelect_s13[hwj].split(TheSplit4)[1]
}
else
{
options[hwj].text = hwSelect_s13[hwj];
options[hwj].value = hwSelect_s13[hwj];
}
var hwSelect_s14=options[selectedIndex].value;
}
}
break;
}
}
document.all.hw.value=hwSelect_s12+""+hwSelect_s14;
}
function hw_init()
{
with(document.all.hw_1)
{
length = hwwhere.length;
var hwm = 0
for(hwk=0;hwkhwwhere.length;hwk++)
{
if (hwwhere[hwk].hwSelect_s1.indexOf(TheSplit4)!=-1)
{
options[hwk].text = hwwhere[hwk].hwSelect_s1.split(TheSplit4)[0];
options[hwk].value = hwwhere[hwk].hwSelect_s1.split(TheSplit4)[1];
if (hwdefault_value.indexOf(hwwhere[hwk].hwSelect_s1.split(TheSplit4)[1])!=-1){hwm = hwk}
}
else
{
options[hwk].text = hwwhere[hwk].hwSelect_s1;
options[hwk].value = hwwhere[hwk].hwSelect_s1;
if (hwdefault_value.indexOf(hwwhere[hwk].hwSelect_s1)!=-1){hwm = hwk}
}
}
selectedIndex = hwm
}
with(document.all.hw_2)
{
var hwn = 0
hwSelect_s13 = (hwwhere[hwm].hwSelect_s2).split(TheSplit3);
length = hwSelect_s13.length;
for(hwl=0;hwllength;hwl++)
{
if (hwSelect_s13[hwl].indexOf(TheSplit4)!=-1)
{
options[hwl].text = hwSelect_s13[hwl].split(TheSplit4)[0];
options[hwl].value = hwSelect_s13[hwl].split(TheSplit4)[1];
if (hwdefault_value.indexOf(hwSelect_s13[hwl].split(TheSplit4)[1])!=-1){hwn = hwl}
}
else
{
options[hwl].text = hwSelect_s13[hwl];
options[hwl].value = hwSelect_s13[hwl];
if (hwdefault_value.indexOf(hwSelect_s13[hwl])!=-1){hwn = hwl}
}
}
selectedIndex = hwn
}
}
hw_init();
//--
/script
/body
/html
jQuery制作简洁的多级联动Select下拉框
今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多。另外,这个Select下拉框也可以绑定下拉事件,并获取当前选中项的值。
html代码:
复制代码
代码如下:
div
class="wrap"
div
class="nice-select"
name="nice-select"
input
type="text"
value="==选择省份=="
readonly
ul
li
data-value="1"湖北省/li
li
data-value="2"广东省/li
li
data-value="3"湖南省/li
li
data-value="4"四川省/li
/ul
/div
div
class="h20"
/div
div
class="nice-select"
name="nice-select"
input
type="text"
value="==选择城市=="
readonly
ul
li
data-value="1"武汉市/li
li
data-value="2"深圳市/li
li
data-value="3"长沙市/li
li
data-value="4"成都市/li
/ul
/div
div
class="h20"
/div
div
class="nice-select"
name="nice-select"
input
type="text"
value="==选择区县=="
readonly
ul
li
data-value="1"蔡甸区/li
li
data-value="2"南山区/li
li
data-value="3"雨花区/li
li
data-value="4"武侯区/li
/ul
/div
/div
script
type="text/javascript"
src="js/jquery.js"/script
script
$('[name="nice-select"]').click(function
(e)
{
$('[name="nice-select"]').find('ul').hide();
$(this).find('ul').show();
e.stopPropagation();
});
$('[name="nice-select"]
li').hover(function
(e)
{
$(this).toggleClass('on');
e.stopPropagation();
});
$('[name="nice-select"]
li').click(function
(e)
{
var
val
=
$(this).text();
var
dataVal
=
$(this).attr("data-value");
$(this).parents('[name="nice-select"]').find('input').val(val);
$('[name="nice-select"]
ul').hide();
e.stopPropagation();
alert("中文值是:"
+
val);
alert("数字值是:"
+
dataVal);
//alert($(this).parents('[name="nice-select"]').find('input').val());
});
$(document).click(function
()
{
$('[name="nice-select"]
ul').hide();
});
/script
css代码:
复制代码
代码如下:
body
{
color:
#555;
font-size:
14px;
font-family:
"微软雅黑"
,
"Microsoft
Yahei";
background-color:
#EEE;
}
a
{
color:
#555;
}
a:hover
{
color:
#f00;
}
input
{
font-size:
14px;
font-family:
"微软雅黑"
,
"Microsoft
Yahei";
}
.wrap
{
width:
500px;
margin:
100px
auto;
}
.h20
{
height:
20px;
overflow:
hidden;
clear:
both;
}
.nice-select
{
width:
245px;
padding:
10px;
height:
38px;
border:
1px
solid
#999;
position:
relative;
box-shadow:
5px
#999;
background:
#fff
url(images/a2.jpg)
no-repeat
right
center;
cursor:
pointer;
}
.nice-select
input
{
display:
block;
width:
100%;
height:
38px;
line-height:
38px
\9;
border:
0;
outline:
0;
background:
none;
cursor:
pointer;
}
.nice-select
ul
{
width:
100%;
display:
none;
position:
absolute;
left:
-1px;
top:
38px;
overflow:
hidden;
background-color:
#fff;
max-height:
150px;
overflow-y:
auto;
border:
1px
solid
#999;
border-top:
0;
box-shadow:
3px
5px
#999;
z-index:
9999;
}
.nice-select
ul
li
{
height:
30px;
line-height:
30px;
overflow:
hidden;
padding:
10px;
cursor:
pointer;
}
.nice-select
ul
li.on
{
background-color:
#e0e0e0;
}
代码很简洁,我这里就不多做解释了,小伙伴们自己预览下就知道效果是多麽的简洁大方了,非常实用。
select下拉菜单联动
script language="javascript" type="text/javascript"
var subsmallclass=new Array();
subsmallclass[0]=new Array("床上用品","尿布");
subsmallclass[1]=new Array("床上用品","四件套");
subsmallclass[2]=new Array("家具用品","沙发");
subsmallclass[3]=new Array("家具用品","餐桌");
function addsmallclass(bigclassvalue,smallclassvalue){
document.getElementById("smclassname").length=0;
document.getElementById("smclassname").options[0]=new Option("==请选择子类目==","")
for (var i=0;isubsmallclass.length;i++){
if (subsmallclass[i][0]==bigclassvalue){
document.getElementById("smclassname").options[document.getElementById("smclassname").length]=new Option(subsmallclass[i][1],subsmallclass[i][1]);
}
}
for (var J=0;Jdocument.getElementById("smclassname").length;J++){
if (document.getElementById("smclassname").options[J].value==smallclassvalue){
document.getElementById("smclassname").options[J].selected=true;
}
}
}
/script
----------------------以上是添加在head/head之间的JS脚本用来实现联动-------------------
----------------------以下代码是添加在body/body是一个表单--------------------------------------
select id="bgclassname" name="bgclassname" onchange="addsmallclass(this.options[this.selectedIndex].value)"
option value=""==请选择一级类目==/option
option value="床上用品"床上用品/optionoption value="家具用品"家具用品/option
/select
select id="smclassname" name="smclassname"
option value=""==请选择子类目==/option
/select
---------------------------------------------以上代码亲测已实现联动-------------------------------------
ASP下拉列表联动代码
就拿最常用的“省市下拉列表联动”作为例子吧!
在我们制作网站会员注册信息时,一般会涉及到填写自己所在省/市,如果用input或textarea做成填写形式不太理想。所以大部分网站都会选择联动下来列表形式,做起来也不算很复杂,同时看上去也很轻松。
具体做法如下:
1.设计数据库
我们选用Access数据库。首先,新建名为database1.mdb的Access数据库
在database1.mdb数据库中建立两个表分别为province、city。具体字段设计如下:
Province(省)
具体字段:id—自动编号 ProvinceName—省名 ProvinceNo—省名编号 ProvinceOrder—省排序编号
省 id ProvinceName ProvinceNo ProvinceOrder
设计思想:id是表的自动编号,ProvinceName和ProvinceNo是必须的,前者是用来存储省名,后者则是联系表city必不可少的字段。至于ProvinceOrder则是用来给省名排序的,控制下拉列表中省名出现的位置,可以省略。
City(城市)
具体字段:id—自动编号 CityName—市名 CityNo—市名编号 CityOrder—市排序编号 ProvinceID—所在省编号
市 id
CityName
CityNo
CityOrder
ProvinceID
以下市名略。
设计思想:前面四项同Province表设计思想,ProvinceID字段将Province表和City表联系起来。
2.设计样式及编码
二级联动的样式很简单,在DreamWeaver 2004里向设计页面上放置两个select下拉菜单,分别取名为Province_select、City_select,它们都在名为form1的表单里。
编码需要用到html、vbscript及javascript。首先是连接数据库,我们用常用的!--#include file="conn.asp"--连接。conn.asp中代码略。
其次,用Javascript和Vbscript将Province和City表中的数据读出来并使Province_select和City_select联系起来,这一步是整个程序的关键所在。
代码如下:
script language=JavaScript
%
dim sql,i,j
'//////////////////////////读出 Province 表//////////////////////////
set rs_Province=server.createobject("adodb.recordset")
sql="select * from Province order by ProvinceOrder"
rs_Province.open sql,conn,1,1
%
var selects=[];
selects['xxx']=new Array(new Option('请选择城市……','xxx'));
%
for i=1 to rs_s.recordcount
%
selects['%=rs_Province("ProvinceNo")%']=new Array(
%
'//////////////////////////读出 City 表//////////////////////////
set rs_City=server.createobject("adodb.recordset")
sql="select * from City where ProvinceID="rs_Province("id")" order by ProvinceOrder"
rs_City.open sql,conn,1,1
if rs_City.recordcount0 then
for j=1 to rs_City.recordcount
if j=rs_City.recordcount then
%
new Option('%=trim(rs_City("CityName"))%','%=trim(rs_City("CityNo"))%'));
%else%
new Option('%=trim(rs_City("Cityname"))%','%=trim(rs_City("CityNo"))%'),
%
end if
rs_City.movenext
next
else
%
new Option('','0'));
%
end if
rs_City.close
set rs_City=nothing
rs_Province.movenext
next
rs_Province.close
set rs_Province=nothing
%
!--//////////JavaScript控制联动///////////--
function chsel(){
with (document.form1){
if(province_select.value) {
city_select.options.length=0;
for(var i=0;iselects[province_select.value].length;i++){
city_select.add(selects[province_select.value][i]);
}
}
}
}
/script
最后,结合html,Javascript和Vbscript实现联动效果。代码如下:
!--//////////////////////////Province_select下拉列表//////////////////////////--
select name="Province_select" onChange=chsel()
option value="xxx" selected请选择省份……/option
%
dim tmpid '定义一个临时变量用来记住省id
tmpid=0
set rs_Province=server.CreateObject("ADODB.recordset")
sql="select * from Province order by ProvinceOrder"
rs_Province.open sql,conn,1,1
while not rs_Province.eof
tmpid=rs_Province("id")
%
option value="%=rs_Province("ProvinceNo")%" %=trim(rs_Province("ProvinceName"))%/option
%
rs_Province.movenext
wend
rs_Province.close
set rs_Province=nothing
%
/select
!--//////////////////////////City_select下拉列表//////////////////////////--
select name="City_select"
%
set rs_City=server.createobject("adodb.recordset")
sql="select * from City where ProvinceID="tmpid" order by CityOrder"
rs_City.open sql,conn,1,1
while not rs_City.eof
%
option value="%=rs_City("CityNo")%"%=trim(rs_City("CityName"))%/option
%
rs_City.movenext
wend
rs_City.close
set rs_City=nothing
%
/select
至此,一个省市二级联动菜单程序便写好了。虽然代码不多,但反映的技术还是比较全面的
JSP 实现两个select下拉框的数据联动,要求根据第一个下拉式选择的内容联动第二个下拉式。需要从数据库中
采用什么方式实现呢?
是页面跳转还是使用Ajax啊
说一下思路吧
页面跳转:
首先进入页面的时候,第一个select的内容是从数据库查询出来的,这个很简单就能实现。
然后在这个select控件上加上onchange事件,onchange事件中获取当选select选中的value
提交到后台,首先将页面中的内容存起来,比如刚才的那个内容使用setAttribute,存起来,
然后在获取一次第一个select控件的信息,然后根据页面被选中的那个value,查询出第二个下拉框内容,然后就可以跳转页面了,跳转到刚才那个页面上,
之后1,将刚才setAttribute的值,设置到第一个select中,然后将刚刚查询的第二个下拉框的值,设置到第二个select框中。可以使用标签的形式等。许多办法都能实现
采用iframe形式,
过程类似,只不过,这次不用setAttribute了,而采用js来将第二个下拉框设置上值就可以了
Ajax:
这种形式最简单了,onchange事件直接提交后台,然后获取第一个的value,关联查询出第二个下拉框的内容,然后返回前台的时候,通过js来修改第二个select
希望对你能有帮助
html 如何做一个二级联动的下拉表单(select)
!doctype htmlhtmlheadmeta charset="utf-8"title联动/title/headbodyselect id="s1" onChange="move()"!-- 根据id获取value,onchange()触发函数move()修改二级select的text值实现联动 --
option selected value="s1"-- 请选择 --/option
!--默认选中--
option value="SC"SC/option
option value="BJ"BJ/option
option value="TJ"TJ/option/selectselect id="s2"
option selected-- 请选择 --/option
!--默认选中,动态生成option --/selectscript
function move()
{
var s1=document.getElementById("s1"); var s2=document.getElementById("s2"); !-- 获取一级和二级的属性--
var add;
if(s1.value=="SC")
{
add=new Array("CD","DZ","MY","NC"); !--比对value值,实现对应二级text值的动态生成--
}else if(s1.value=="BJ")
{
add=new Array("HD","CY","WFJ");!--比对value值,实现对应二级text值的动态生成--
}else if(s1.value=="TJ")
{
add=new Array("TJG","TJ","TJY"); !--比对value值,实现对应二级text值的动态生成--
}else if(s1.value=="s1")
{
add=new Array("请选择");
}
else
{
add=null; !--若没有就为空,当然不可能出现的--
}
s2.length=0;
for(var i=0;iadd.length;i++) { var ss=new Option(); ss.text=add[i].split()[0];
s2.add(ss);
!--把text值添加到二级select中,显示出来--
}
}/script/body/html
简单select下拉联动代码的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于下拉列表联动选择表单项、简单select下拉联动代码的信息别忘了在本站进行查找喔。
版权说明:如非注明,本站文章均为 AH站长 原创,转载请注明出处和附带本文链接;
- 上一篇:关于asp职工管理系统源代码的信息
- 下一篇:包含.net如何贴吧源代码的词条
相关推荐
- 05-05小说源码里面的下载代码(小说 源代码)[20240505更新]
- 05-05网页图片位置代码(网页设计中图片的位置)[20240505更新]
- 05-05关于nat打洞代码的信息[20240505更新]
- 05-05实现导航界面代码(导航用户界面)[20240505更新]
- 05-05酷代码网站(很酷的代码)[20240505更新]
- 05-05unity3d德州扑克源代码的简单介绍[20240505更新]
- 05-05数字货币最新开源代码(数字货币开源代码公布意味着什么)[20240505更新]
- 05-05jquery代码交互(jquery前后端交互)[20240505更新]
- 05-05dreamweaver压缩代码(dreamweaver格式化代码)[20240505更新]
- 05-05网页代码表(网页代码表格边框)[20240505更新]
取消回复欢迎 你 发表评论:
- 标签列表
- 最近发表
- 友情链接