html中select标签单选多选用法详解

select 元素可创建单选或多选菜单。当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将 <select> 表单数据提交给服务器时包括 name 属性。
一、基本用法：
+ p- e7 ^+ `  d$ Z2 S! Z3 _代码如下:
# a" i# F- u6 ^: F$ V<select>
<option value =volvo>volvo</option>
+ G6 c% j5 W  P9 c5 y<option value =saab>saab</option>
<option value=opel>opel</option>
<option value=audi>audi</option>
</select>
其中，</option>标签可以省掉，在页面中用法
' F# N1 P- b! ^' A# @% C. V& }代码如下:
<select name=studycenter id=studycenter size=1>
5 e' W: m% b: r8 h& V2 k2 M; ~<option value=0>全部
" H$ x3 c; B+ x: S; W+ c7 n9 c4 a- A2 k<option value=1>湖北电大网络学习中心
<option value=2>成都师范学院网络学习中心
<option value=3>武汉职业技术学院网络学习中心
</select>
二、select元素还可以多选，看如下代码：
1 E! F# q# F( y- E/ q8 Y代码如下:
: F: f/ ?% x/ k: `//有multiple属性，则可以多选
- H& m8 }& ~& k" O$ }! O/ R<select name= “education” id=”education” multiple=”multiple”>
! E) T) i( L% w, B<option value=”1”>高中</option>
<option value=”2”>大学</option>
! N' a9 I9 m: @" [- y! }<option value=”3”>博士</option>
</select>
//下面没有multiple属性 , 只显示一条，不能多选
<select name= “education” id=”education” >
# V8 {. }0 I! [. ]<option value=”1”>高中</option>
<option value=”2”>大学</option>
<option value=”3”>博士</option>
</select>
//下面是设置了size属性的情况 , 如果size = 3 那么就显示三条数据，注意不能多选的。
7 N% E6 _# b6 }% h4 K8 E<select name=education id=education size='3'>
<option value=0>小学</option>
<option value=1>初中</option>
<option value=2>高中</option>
! J$ W: u9 q8 e# g6 |<option value=3>中专</option>
<option value=4>大专</option>
<option value=5>本科</option>
- p5 O: A& }# l# R, P<option value=6>研究生</option>
4 T8 x- @7 O9 x! V2 A# ^8 E; c% S- Y<option value=7>博士</option>
( w( h( O" i) L0 P- m6 ]<option value=8>博士后</option>
) |( H* e4 X5 n, o<option selected>请选择</option>
+ ?  Z4 }& I) U4 }- k" G3 S</select>
三、多选select组件涉及的所有常用操作：
" O/ Q5 G5 Y  V4 K7 O- t' @( K# m) E1 H1. 判断select选项中是否存在指定值的item
2 x% Y. \5 A6 a$ X代码如下:
@param objselectid 将要验证的目标select组件的id
@param objitemvalue 将要验证是否存在的值
0 Y: a- y3 \4 T* m6 u, c  |function isselectitemexit(objselectid,objitemvalue) {
var objselect = document.getelementbyid(objselectid);
var isexit = false;
if (null != objselect && typeof(objselect) != undefined) {
: k0 b6 p0 ~, F5 \: C4 v' Dfor(var i=0;i<objselect.options.length;i++) {
if(objselect.options.value == objitemvalue) {
! g0 N- p  `$ D: _0 Gisexit = true;
' Z# l! w" N' o$ w: _0 ?& Rbreak;
" ?1 s- `% l  `$ E* M: T}
}
}
2 D% \( }# a. o8 Areturn isexit;
}
2.向select选项中加入一个item
: B5 `1 b% X2 g) J3 q+ Z7 y1 o代码如下:
@param objselectid 将要加入item的目标select组件的id
" i4 ]  F8 k7 ?3 _@param objitemtext 将要加入的item显示的内容
@param objitemvalue 将要加入的item的值
function addoneitemtoselect(objselectid,objitemtext,objitemvalue) {
% y0 ?5 Z7 L3 G( }0 E; e8 h- z+ d1 Y+ Lvar objselect = document.getelementbyid(objselectid);
if (null != objselect && typeof(objselect) != undefined) {
/ _* q5 B, M1 }3 ^# f6 F//判断是否该值的item已经在select中存在
# }8 I: |' G3 N3 k3 nif(isselectitemexit(objselectid,objitemvalue)) {
' Y: l* [6 R) c- W3 D* D- p$.messager.alert('提示消息','该值的选项已经存在!','info');
# i, `7 a5 h9 f5 V} else {
var varitem = new option(objitemtext,objitemvalue);
objselect.options.add(varitem);
. t9 n7 I3 p: N+ l, E' c" o0 c}
}
}
; c( N5 F1 @/ S9 ?' Y3.从select选项中删除选中的项，支持多选多删
& e" V4 }& \/ ]- p# D4 C: k代码如下:
$ \' m3 P/ ?6 u2 ^1 b9 W@param objselectid 将要进行删除的目标select组件id
# t7 H5 ^+ a1 @4 \4 g* ^function removeselectitemsfromselect(objselectid) {
var objselect = document.getelementbyid(objselectid);
; S9 t0 z8 e# f" f8 Fvar delnum = 0;
if (null != objselect && typeof(objselect) != undefined) {
0 M5 i8 Y. d& l: Dfor(var i=0;i<objselect.options.length;i=i+1) {
if(objselect.options.selected) {
: E: ~' {0 p4 f+ kobjselect.options.remove(i);
% \. E- R; T, b3 udelnum = delnum + 1;
! l/ h6 E. X' c2 X- P* Q/ r% v  X& @: ^i = i - 1;
}
}
8 Q) R. y# |$ }8 p! ]8 Bif (delnum <= 0 ) {
% m' p; z5 I: G* M$.messager.alert('提示消息','请选择你要删除的选项!','info');
} else {
$.messager.alert('提示消息','成功删除了'+delnum+'个选项!','info');
9 O# v# N. m7 C3 n  f}
# ?+ Z" Z: G  k0 a* Y}
}
% f' _* x" }& }; y' H4.从select选项中按指定的值删除一个item
代码如下:
% X* S" Z& y2 m& m@param objselectid 将要验证的目标select组件的id
2 `8 K# k9 z" e$ z4 F( J0 t4 [@param objitemvalue 将要验证是否存在的值
function removeitemfromselectbyitemvalue(objselectid,objitemvalue) {
4 h( d+ c+ }) avar objselect = document.getelementbyid(objselectid);
# b! K6 n! j1 D7 n7 _if (null != objselect && typeof(objselect) != undefined) {
' g0 ?# j4 H- \- a5 `8 Z* b//判断是否存在
if(isselectitemexit(objselect,objitemvalue)) {
% @  o5 U# |4 jfor(var i=0;i<objselect.options.length;i++) {
if(objselect.options.value == objitemvalue) {
objselect.options.remove(i);
break;
5 ?; R& Q# s& S. H}
1 Y" o' x% X; x2 n}
$.messager.alert('提示消息','成功删除!','info');
6 L. x" b0 }# p5 L5 P} else {
$.messager.alert('提示消息','不存在指定值的选项!','info');
! V/ S# r- a5 L5 z) a( o* s7 @}
, [  m7 Z7 e% V# M+ v}
}
8 v8 R' u; r8 p* ?+ E: Q) n5 m: T5.清空select中的所有选项
代码如下:
0 H8 K1 B, P9 a  o* x@param objselectid 将要进行清空的目标select组件id
function clearselect(objselectid) {
% L- J% c- f$ m. U7 @var objselect = document.getelementbyid(objselectid);
if (null != objselect && typeof(objselect) != undefined) {
for(var i=0;i<objselect.options.length;) {
objselect.options.remove(i);
}
}
}
6. 获取select中的所有item，并且组装所有的值为一个字符串，值与值之间用逗号隔开
代码如下:
@param objselectid 目标select组件id
@return select中所有item的值，值与值之间用逗号隔开
function getallitemvaluesbystring(objselectid) {
var selectitemsvaluesstr = ;
, u( S/ t# R+ L+ Y6 g9 nvar objselect = document.getelementbyid(objselectid);
if (null != objselect && typeof(objselect) != undefined) {
var length = objselect.options.length
for(var i = 0; i < length; i = i + 1) {
& ~. b. }) Z, N* d$ @5 ^if (0 == i) {
9 p' j+ t9 v! z) K+ w! e: iselectitemsvaluesstr = objselect.options.value;
} else {
7 c, w. x6 i4 @4 P2 V, Y$ T' ^selectitemsvaluesstr = selectitemsvaluesstr + , + objselect.options.value;
}
6 e3 R6 `/ `) X}
}
return selectitemsvaluesstr;
) s- T6 }2 [. {9 }7 N1 p}
7. 将一个select中的所有选中的选项移到另一个select中去
) ~# k/ u2 _1 }代码如下:
# a# M0 Z  e0 S9 [7 @@param fromobjselectid 移动item的原select组件id
@param toobjectselectid 移动item将要进入的目标select组件id
function moveallselectedtoanotherselectobject(fromobjselectid, toobjectselectid) {
. C8 i' [# }6 X- ?) l8 }var objselect = document.getelementbyid(fromobjselectid);
8 G9 S5 N, z3 M6 O6 Tvar delnum = 0;
if (null != objselect && typeof(objselect) != undefined) {
for(var i=0;i<objselect.options.length;i=i+1) {
3 z( s2 a6 ?, _9 Tif(objselect.options.selected) {
1 T+ l" G" k. Q8 j7 Iaddoneitemtoselect(toobjectselectid,objselect.options.text,objselect.options.value)
: Q; D. d4 X5 fobjselect.options.remove(i);
i = i - 1;
}
2 h0 b  ?6 e; w% y; n% L}
' C$ x4 m" A7 P- s}
. T7 f3 B1 i" m% E' z) D* @}
- z" }3 z$ s( C- T9 h8. 将一个select中的所有选项移到另一个select中去
% W" m! \' A# C4 a% a代码如下:
* E# V+ V9 H6 \1 C1 U@param fromobjselectid 移动item的原select组件id
@param toobjectselectid 移动item将要进入的目标select组件id
/ h* r9 }- t3 X: s) V3 J# Jfunction movealltoanotherselectobject(fromobjselectid, toobjectselectid) {
( M2 j5 z& a0 D5 j. y: lvar objselect = document.getelementbyid(fromobjselectid);
if (null != objselect) {
1 i1 ~; m3 w: @& O9 h8 n8 r* ]% Mfor(var i=0;i<objselect.options.length;i=i+1) {
addoneitemtoselect(toobjectselectid,objselect.options.text,objselect.options.value)
  {0 {/ w& g! ]* Z) }- K3 Bobjselect.options.remove(i);
i = i - 1;
- M: V( D3 ~3 U6 ?0 l}
9 ~  e% s. y# G3 I) `& d}
}
( K8 D1 ?) s# X) t% p9 v' k
更多网页制作信息请查看： 网页制作

下次有人骂我了...我给他还回去..

我不是来抢沙发的，也不是来打酱油的。

你该这么说~~

哦~~~明白了....

还没崇拜过谁呢,满足一下愿望吧,谢谢!

我是来收集资料滴...

今天统计好像出了问题