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

select 元素可创建单选或多选菜单。当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将 <select> 表单数据提交给服务器时包括 name 属性。
- S/ M0 L/ y. O一、基本用法：
代码如下:
<select>
<option value =volvo>volvo</option>
<option value =saab>saab</option>
<option value=opel>opel</option>
9 b2 m% V1 r5 ?% P<option value=audi>audi</option>
</select>
/ ^. H, Y% |) H1 P1 `( k& s其中，</option>标签可以省掉，在页面中用法
: H/ w/ x9 y1 v, K代码如下:
) L1 G; N) j. u, w; q0 ^<select name=studycenter id=studycenter size=1>
! V8 }3 C+ e8 o& d! h) |+ P( }<option value=0>全部
<option value=1>湖北电大网络学习中心
1 k* y3 t6 K5 v7 a3 j( @' j! d<option value=2>成都师范学院网络学习中心
<option value=3>武汉职业技术学院网络学习中心
- T7 q2 j( W; {: S: J4 k</select>
4 ]2 v" q  n  k二、select元素还可以多选，看如下代码：
代码如下:
//有multiple属性，则可以多选
. x' A1 ?+ m7 a' p% R- G<select name= “education” id=”education” multiple=”multiple”>
<option value=”1”>高中</option>
<option value=”2”>大学</option>
4 x2 ?8 a3 H2 O- w" D( X' Z<option value=”3”>博士</option>
</select>
//下面没有multiple属性 , 只显示一条，不能多选
<select name= “education” id=”education” >
3 f2 k+ s* t5 [; ?<option value=”1”>高中</option>
! s5 I2 r" v) w1 Z7 r<option value=”2”>大学</option>
<option value=”3”>博士</option>
</select>
//下面是设置了size属性的情况 , 如果size = 3 那么就显示三条数据，注意不能多选的。
<select name=education id=education size='3'>
<option value=0>小学</option>
1 v  F* n1 z* T<option value=1>初中</option>
<option value=2>高中</option>
2 M. Z6 g* F0 ?5 x2 H<option value=3>中专</option>
<option value=4>大专</option>
- @- L; C: Q& [" b" ^5 x<option value=5>本科</option>
<option value=6>研究生</option>
; z4 B( ^; G, |' k/ a. L8 K<option value=7>博士</option>
0 ^: _* A7 p* _1 i2 |% q) S<option value=8>博士后</option>
<option selected>请选择</option>
</select>
三、多选select组件涉及的所有常用操作：
1. 判断select选项中是否存在指定值的item
7 h% ~9 M  q+ V- N代码如下:
9 U& c( B) T$ g7 L@param objselectid 将要验证的目标select组件的id
@param objitemvalue 将要验证是否存在的值
# {. k4 L* p6 s6 _  m9 Yfunction isselectitemexit(objselectid,objitemvalue) {
var objselect = document.getelementbyid(objselectid);
7 b' K- M& }: {- p8 j# ?var isexit = false;
if (null != objselect && typeof(objselect) != undefined) {
for(var i=0;i<objselect.options.length;i++) {
7 g: E; B; A7 c+ F$ Lif(objselect.options.value == objitemvalue) {
5 Q3 g+ Q8 P. _) h8 bisexit = true;
: d' \% w4 J) w! [5 Hbreak;
! f2 R( V( U: a! V}
}
1 u9 X: U0 A5 `; C( Q+ }}
- q& w2 g# ^. T8 m8 O1 preturn isexit;
$ c: z' B" s3 K1 _' V  r! A}
, l& x7 f8 ?  n# X! K0 J2.向select选项中加入一个item
0 o$ W/ h  H% b, r' ^' d; u代码如下:
5 }. z- X% b/ \. k6 U* ~: }@param objselectid 将要加入item的目标select组件的id
" P9 k5 J6 S. ^/ T8 `- d2 x@param objitemtext 将要加入的item显示的内容
@param objitemvalue 将要加入的item的值
9 n! x$ W% J7 @; W! Jfunction addoneitemtoselect(objselectid,objitemtext,objitemvalue) {
var objselect = document.getelementbyid(objselectid);
! {+ t  ], o/ [) W# [if (null != objselect && typeof(objselect) != undefined) {
4 d/ L. p  Y6 Q6 M% I//判断是否该值的item已经在select中存在
- |& V( ~  z3 O- b3 G# a7 Aif(isselectitemexit(objselectid,objitemvalue)) {
$.messager.alert('提示消息','该值的选项已经存在!','info');
} else {
5 j* E5 r0 N! q+ E8 u: a8 H9 C8 vvar varitem = new option(objitemtext,objitemvalue);
objselect.options.add(varitem);
}
2 i6 R# ?8 \* z; }5 n}
& D0 s' W( |5 m: S+ R}
1 W& Y  ?" ?1 l+ @$ U/ {0 z3 L, l3.从select选项中删除选中的项，支持多选多删
9 q, I- {9 D2 x) T2 w1 J, @1 b代码如下:
; R$ ]2 V6 {$ L" W# h2 m' n@param objselectid 将要进行删除的目标select组件id
* Y# Z8 X  m- k# ]function removeselectitemsfromselect(objselectid) {
: I. S4 J1 P! D: l: Nvar objselect = document.getelementbyid(objselectid);
0 U' K  |# N  l& j4 c/ ?var delnum = 0;
2 F' ^4 b9 ~& ?$ C6 ~6 {) k% Sif (null != objselect && typeof(objselect) != undefined) {
2 l; t* S/ ~+ |9 L- m$ Yfor(var i=0;i<objselect.options.length;i=i+1) {
1 K! ~& ^, i; ~4 @9 l9 d2 [  a( Uif(objselect.options.selected) {
7 ~% m+ }' E" m( Lobjselect.options.remove(i);
# l- z& P4 P* f4 \1 Sdelnum = delnum + 1;
i = i - 1;
9 j- x  B: `  R0 q# c}
}
if (delnum <= 0 ) {
$.messager.alert('提示消息','请选择你要删除的选项!','info');
5 {9 j4 s* c4 c' o2 _, S$ Q} else {
$.messager.alert('提示消息','成功删除了'+delnum+'个选项!','info');
# u: N) ?$ w/ \}
' {+ D8 F. H# z* B5 I! J) r}
# b# Y  p; ~( u$ a! P8 d5 B8 H}
) N; {1 N+ N  I8 J4.从select选项中按指定的值删除一个item
' Q- K, ~7 A8 n+ |5 P+ d5 l代码如下:
@param objselectid 将要验证的目标select组件的id
3 n8 q1 W' G2 _$ e5 i@param objitemvalue 将要验证是否存在的值
4 L, s: l3 m5 Tfunction removeitemfromselectbyitemvalue(objselectid,objitemvalue) {
var objselect = document.getelementbyid(objselectid);
if (null != objselect && typeof(objselect) != undefined) {
0 N" \* m) G# P) ?$ u//判断是否存在
* U8 d4 h2 a% b$ _3 Oif(isselectitemexit(objselect,objitemvalue)) {
1 C/ G( I/ _8 a5 s7 Q0 Vfor(var i=0;i<objselect.options.length;i++) {
! `' G  D5 A- n* mif(objselect.options.value == objitemvalue) {
objselect.options.remove(i);
) `) R0 g, W# n" N: |# r9 Wbreak;
  O# K% \+ A4 m) R! v1 H1 d  x0 F}
* D5 O  u( t& d" K  Z}
* z/ D1 b& O9 G# I  {0 G$.messager.alert('提示消息','成功删除!','info');
2 H& G' G2 w: a  R  ^/ n+ O' \, i} else {
6 P! d$ O# c0 F$.messager.alert('提示消息','不存在指定值的选项!','info');
! y, |# i7 X1 o3 B2 W}
7 @' f2 V9 N1 @, ?3 A# g}
}
5.清空select中的所有选项
代码如下:
3 J: H; z5 ?. W3 _) d5 i@param objselectid 将要进行清空的目标select组件id
  C5 M8 I' `+ @4 Gfunction clearselect(objselectid) {
var objselect = document.getelementbyid(objselectid);
if (null != objselect && typeof(objselect) != undefined) {
) ?+ i# y# R$ D8 B' Ufor(var i=0;i<objselect.options.length;) {
. \) H$ _- b3 C; k7 V9 gobjselect.options.remove(i);
9 c% \' S, _# g# ~. h' P0 {}
4 ~' r& E. z' ^$ }  {6 k$ X}
( J: m. l# {4 x" |! n; G# M% X}
3 G/ D1 w$ S2 y) T6 ~6. 获取select中的所有item，并且组装所有的值为一个字符串，值与值之间用逗号隔开
代码如下:
. G+ g0 b1 J; N- w$ r. P@param objselectid 目标select组件id
' S$ K9 G  O& W/ ^: V@return select中所有item的值，值与值之间用逗号隔开
function getallitemvaluesbystring(objselectid) {
var selectitemsvaluesstr = ;
var objselect = document.getelementbyid(objselectid);
if (null != objselect && typeof(objselect) != undefined) {
var length = objselect.options.length
! e3 W. D% l7 X8 T& tfor(var i = 0; i < length; i = i + 1) {
; {0 m* j' w* l! d6 [: a# `if (0 == i) {
; A0 u; v( h1 @. ~( b# m; K/ ]3 S$ E* qselectitemsvaluesstr = objselect.options.value;
} else {
& A- S) A# B* i. xselectitemsvaluesstr = selectitemsvaluesstr + , + objselect.options.value;
' c; _: S5 B' H2 v5 ^}
}
}
return selectitemsvaluesstr;
}
! S: Q- I( D/ b3 {7. 将一个select中的所有选中的选项移到另一个select中去
; Y" e0 Z0 n9 t( w, L2 r代码如下:
@param fromobjselectid 移动item的原select组件id
@param toobjectselectid 移动item将要进入的目标select组件id
$ x* H. t9 W$ e1 \! j2 Dfunction moveallselectedtoanotherselectobject(fromobjselectid, toobjectselectid) {
var objselect = document.getelementbyid(fromobjselectid);
var delnum = 0;
- s9 y6 Y  S9 r$ m; z: {% f2 C; \if (null != objselect && typeof(objselect) != undefined) {
* L" n+ [) l& q! U! s8 Mfor(var i=0;i<objselect.options.length;i=i+1) {
# R$ B5 g- m- q9 G) I+ ^if(objselect.options.selected) {
, r1 y$ j) ^, `6 m/ y: S/ Jaddoneitemtoselect(toobjectselectid,objselect.options.text,objselect.options.value)
: d+ A/ N6 O( L" ~5 \; ~6 k! Lobjselect.options.remove(i);
5 V# q* g6 A0 `+ [( y  ~( Pi = i - 1;
5 o0 c4 r. F) E5 Q9 u0 I}
7 P1 @  _5 w5 d$ A! L  x+ g' L- f}
$ R4 T0 }; x6 {. Z  l+ A) X}
}
1 C2 t/ t9 Z' R3 |7 U9 E8. 将一个select中的所有选项移到另一个select中去
4 f  V& o5 e" n7 E# C$ m代码如下:
2 `1 x8 z+ C) g. Z9 Z5 `# D8 |@param fromobjselectid 移动item的原select组件id
0 R' F) D/ v: \: L( {1 @@param toobjectselectid 移动item将要进入的目标select组件id
. \7 I- n+ m2 f" U9 Kfunction movealltoanotherselectobject(fromobjselectid, toobjectselectid) {
var objselect = document.getelementbyid(fromobjselectid);
if (null != objselect) {
  f! u' K+ }+ \. wfor(var i=0;i<objselect.options.length;i=i+1) {
addoneitemtoselect(toobjectselectid,objselect.options.text,objselect.options.value)
& @' L. v$ N: }/ q( _* wobjselect.options.remove(i);
i = i - 1;
/ _0 L% Y" o! |0 a3 \, P2 N}
0 W7 a9 j8 D, V4 O}
/ V7 ?( }! X* Y}
/ _2 Z, T: H5 ?4 M* U9 P. I
! K  p. `4 P8 N更多网页制作信息请查看： 网页制作

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

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

你该这么说~~

哦~~~明白了....

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

我是来收集资料滴...

今天统计好像出了问题