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

select 元素可创建单选或多选菜单。当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将 <select> 表单数据提交给服务器时包括 name 属性。
一、基本用法：
代码如下:
2 ~) ^2 Y; _* q/ E3 j<select>
<option value =volvo>volvo</option>
3 h, r+ C/ ?) p* L<option value =saab>saab</option>
<option value=opel>opel</option>
; H" g4 ~) |: H0 s  J8 |1 f$ u: R5 y<option value=audi>audi</option>
" c3 w" n6 Y  s</select>
8 Q  {0 l! [9 X6 Z5 u5 k/ V  C; r其中，</option>标签可以省掉，在页面中用法
3 T4 t5 X  A: U4 X* l代码如下:
. `3 v% D9 |( ^% N# D( j, T+ l5 J<select name=studycenter id=studycenter size=1>
<option value=0>全部
5 ]+ T7 k4 T8 U<option value=1>湖北电大网络学习中心
: L4 U4 Q; B$ N* X0 W( Z<option value=2>成都师范学院网络学习中心
<option value=3>武汉职业技术学院网络学习中心
</select>
0 C# j& C% D# E8 o" B8 i% z, N二、select元素还可以多选，看如下代码：
  |$ V, }( D3 X% V" F" Q代码如下:
//有multiple属性，则可以多选
# [6 i  ~4 U( a- F2 v, F<select name= “education” id=”education” multiple=”multiple”>
% W0 |2 T' Y1 Q5 W% L8 u4 [( c<option value=”1”>高中</option>
( e/ c' V, ~- V  I; p3 O6 F<option value=”2”>大学</option>
<option value=”3”>博士</option>
. t$ y6 w; g+ m, f( ]</select>
//下面没有multiple属性 , 只显示一条，不能多选
# s; i) x* o# I8 P, H+ P<select name= “education” id=”education” >
7 I/ Y5 d3 ]1 h6 T) D; \9 N* m- T. w& y<option value=”1”>高中</option>
<option value=”2”>大学</option>
' k1 ]$ e5 Q5 b6 k8 M<option value=”3”>博士</option>
</select>
! v4 ?' E0 S2 }) C. l* \//下面是设置了size属性的情况 , 如果size = 3 那么就显示三条数据，注意不能多选的。
<select name=education id=education size='3'>
<option value=0>小学</option>
! o  B5 E/ n# F! c* K<option value=1>初中</option>
# ^$ q) |8 }( z4 g, e5 h, \$ F4 ~9 p: r<option value=2>高中</option>
<option value=3>中专</option>
<option value=4>大专</option>
0 o* T: t+ h1 @1 F( o<option value=5>本科</option>
2 N+ Z  N6 V: e4 b<option value=6>研究生</option>
$ M5 L) k0 g' x7 ?! \5 N. B6 Q<option value=7>博士</option>
<option value=8>博士后</option>
<option selected>请选择</option>
. W$ W  J/ U. F) s</select>
' ?& s; {9 z3 g7 y1 _& ?9 \/ C三、多选select组件涉及的所有常用操作：
" W) ~: F* g2 z. T  y/ Z1 g1. 判断select选项中是否存在指定值的item
代码如下:
@param objselectid 将要验证的目标select组件的id
- Q: x9 Y9 @/ K, ?% p5 q4 J/ A@param objitemvalue 将要验证是否存在的值
function isselectitemexit(objselectid,objitemvalue) {
var objselect = document.getelementbyid(objselectid);
, |, ~7 Z- }. Xvar isexit = false;
! g/ O1 t: }5 N& dif (null != objselect && typeof(objselect) != undefined) {
7 e' Y9 Y- S- rfor(var i=0;i<objselect.options.length;i++) {
6 ~  Q, e+ C- B$ Y* cif(objselect.options.value == objitemvalue) {
isexit = true;
& X0 T+ D$ M! [3 T0 v3 G5 qbreak;
}
# M9 {* E( }$ k" E}
! A+ B5 V- |0 q1 z9 {2 q}
1 N6 F, v: F5 Y" C8 T# preturn isexit;
5 o& j( C* ~# P" X9 M% s}
1 @/ T# o! a& i$ b7 k2.向select选项中加入一个item
代码如下:
) t/ t9 m5 W0 T% Q$ V@param objselectid 将要加入item的目标select组件的id
@param objitemtext 将要加入的item显示的内容
@param objitemvalue 将要加入的item的值
) V! w4 V, ^4 t8 Y( ifunction addoneitemtoselect(objselectid,objitemtext,objitemvalue) {
var objselect = document.getelementbyid(objselectid);
  x4 d9 K8 r& I; V+ I" hif (null != objselect && typeof(objselect) != undefined) {
//判断是否该值的item已经在select中存在
3 b) J3 {/ w6 Z' X, Cif(isselectitemexit(objselectid,objitemvalue)) {
8 o4 C, e# e' z# w6 P$.messager.alert('提示消息','该值的选项已经存在!','info');
6 A" }% o# \# g7 M* w0 l} else {
3 S8 n0 r% ~* r  M/ ^var varitem = new option(objitemtext,objitemvalue);
objselect.options.add(varitem);
}
/ [6 r8 }) A% O1 j}
}
3.从select选项中删除选中的项，支持多选多删
2 S& C  d. _- D% [+ c: j代码如下:
! Y: {+ u4 `8 j8 X1 `@param objselectid 将要进行删除的目标select组件id
/ S; \8 a. T" ~: J$ p3 G% ^function removeselectitemsfromselect(objselectid) {
/ ?! ]5 a' r. Z: m4 g3 ]var objselect = document.getelementbyid(objselectid);
var delnum = 0;
if (null != objselect && typeof(objselect) != undefined) {
for(var i=0;i<objselect.options.length;i=i+1) {
if(objselect.options.selected) {
objselect.options.remove(i);
4 x) _& @4 ^- J+ k! T' A! ]8 T1 xdelnum = delnum + 1;
9 F6 o( n3 s( I0 ^  E0 _4 hi = i - 1;
}
- ^3 d8 V, ]+ P' {}
if (delnum <= 0 ) {
- v+ t  D2 j; h$.messager.alert('提示消息','请选择你要删除的选项!','info');
. e& i, b) o) b( ?! Z} else {
1 e; ?) F2 a- L( Y! S* T" K  E$.messager.alert('提示消息','成功删除了'+delnum+'个选项!','info');
}
8 D# I6 z0 [; l5 c" m( }& @3 B}
6 Y* _' Y3 c8 k! a  Z4 l: t}
4.从select选项中按指定的值删除一个item
) s2 q. n9 x' h; w, t% Q代码如下:
2 E% O1 l$ T, ~5 J2 i/ n@param objselectid 将要验证的目标select组件的id
7 C. e5 X" K" |: U5 C" R1 l@param objitemvalue 将要验证是否存在的值
function removeitemfromselectbyitemvalue(objselectid,objitemvalue) {
# J! [. }9 j' N' g9 mvar objselect = document.getelementbyid(objselectid);
if (null != objselect && typeof(objselect) != undefined) {
  H8 I% y$ Y1 p) \& [: j; a$ r//判断是否存在
if(isselectitemexit(objselect,objitemvalue)) {
for(var i=0;i<objselect.options.length;i++) {
) m  Z' i" b4 g& Xif(objselect.options.value == objitemvalue) {
' @( r, ?# d) s! h* W' N' fobjselect.options.remove(i);
break;
' n, u/ e9 \! j5 ^9 u}
}
$.messager.alert('提示消息','成功删除!','info');
} else {
$.messager.alert('提示消息','不存在指定值的选项!','info');
}
}
}
5.清空select中的所有选项
3 L$ S4 z3 r3 h, |1 o' X代码如下:
@param objselectid 将要进行清空的目标select组件id
function clearselect(objselectid) {
8 }# g3 P' i4 c, p% Z9 P4 fvar objselect = document.getelementbyid(objselectid);
" Z- q; e& S+ r7 A* P& L7 Bif (null != objselect && typeof(objselect) != undefined) {
# ]* R5 x1 s9 `. L" ]5 Q* a( sfor(var i=0;i<objselect.options.length;) {
. x% {1 Q4 G+ m$ Uobjselect.options.remove(i);
  ]' }5 d3 F- G3 L% o# Y4 O}
  _5 J, |1 b9 g% g: e$ r}
& }6 r0 v9 V; A6 r}
' \8 A+ h$ W' q! `2 `6. 获取select中的所有item，并且组装所有的值为一个字符串，值与值之间用逗号隔开
代码如下:
/ D( [6 g  k& R/ L3 P. z; f7 R. c@param objselectid 目标select组件id
' i* Z* k4 r" x& k@return select中所有item的值，值与值之间用逗号隔开
3 c+ ^# z. e5 }. c' V+ V- e% J# xfunction getallitemvaluesbystring(objselectid) {
var selectitemsvaluesstr = ;
: u' f) A3 D$ K' Q6 L) W: hvar objselect = document.getelementbyid(objselectid);
+ ~. m# i. z5 w+ l! Rif (null != objselect && typeof(objselect) != undefined) {
( v. Q" ~+ I2 Q$ |/ [" nvar length = objselect.options.length
8 @7 ~1 _- R2 y$ ~for(var i = 0; i < length; i = i + 1) {
; ^$ |7 f6 T# }0 d8 jif (0 == i) {
selectitemsvaluesstr = objselect.options.value;
} else {
selectitemsvaluesstr = selectitemsvaluesstr + , + objselect.options.value;
}
2 ~) N, g# o2 \$ j}
4 q# c! u7 T( q, Z! b( S, m}
! F9 z4 Q7 R2 J- dreturn selectitemsvaluesstr;
5 \1 Z( K7 U* u0 a. K}
+ O. z7 L) `: |& K7 Q/ S7. 将一个select中的所有选中的选项移到另一个select中去
- x5 p" Q8 q3 J- @* e( H! }代码如下:
8 z( O$ X/ o4 ]@param fromobjselectid 移动item的原select组件id
@param toobjectselectid 移动item将要进入的目标select组件id
; w$ H1 F! z% lfunction moveallselectedtoanotherselectobject(fromobjselectid, toobjectselectid) {
var objselect = document.getelementbyid(fromobjselectid);
6 H' K( |4 t: i; b. Svar delnum = 0;
if (null != objselect && typeof(objselect) != undefined) {
7 T4 r0 ~) \& k  P+ U7 n, kfor(var i=0;i<objselect.options.length;i=i+1) {
: _: x) a( ?6 H# }8 Jif(objselect.options.selected) {
addoneitemtoselect(toobjectselectid,objselect.options.text,objselect.options.value)
objselect.options.remove(i);
, C  f8 f" G$ M6 V% Di = i - 1;
! W0 t( t# P' t1 r' h! t}
. E' U4 n, K1 W( h8 [4 r7 Z: C}
" {( Q) R  G6 H3 Z1 t}
}
) N. ^6 `+ y+ b% s" h8. 将一个select中的所有选项移到另一个select中去
* n: u1 J; V1 h, J1 Z3 J代码如下:
@param fromobjselectid 移动item的原select组件id
- ?; a. c5 E  q  O: L@param toobjectselectid 移动item将要进入的目标select组件id
function movealltoanotherselectobject(fromobjselectid, toobjectselectid) {
2 G7 ?9 e1 b' @8 x% avar objselect = document.getelementbyid(fromobjselectid);
if (null != objselect) {
for(var i=0;i<objselect.options.length;i=i+1) {
  J" z  }1 O. P: o$ N' [) k* `addoneitemtoselect(toobjectselectid,objselect.options.text,objselect.options.value)
objselect.options.remove(i);
i = i - 1;
}
}
! z% R- ^9 r* B( ]( I# ^1 j}
) X2 i+ C/ R& P/ g% }: t
& g& U2 x0 A1 _6 H$ {更多网页制作信息请查看： 网页制作

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

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

你该这么说~~

哦~~~明白了....

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

我是来收集资料滴...

今天统计好像出了问题