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

select 元素可创建单选或多选菜单。当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将 <select> 表单数据提交给服务器时包括 name 属性。
! e& o+ U4 J# R一、基本用法：
代码如下:
# N5 w% E% o8 m; v1 r<select>
<option value =volvo>volvo</option>
<option value =saab>saab</option>
5 {' U0 W  Z- @6 r+ I<option value=opel>opel</option>
7 |- c, q6 K  d<option value=audi>audi</option>
" A" F2 N0 C/ T* M$ v- a</select>
其中，</option>标签可以省掉，在页面中用法
代码如下:
; G; G4 i6 O, t' l. N. m- a<select name=studycenter id=studycenter size=1>
<option value=0>全部
<option value=1>湖北电大网络学习中心
<option value=2>成都师范学院网络学习中心
+ |( i. w! P& c# f; P$ H9 q<option value=3>武汉职业技术学院网络学习中心
</select>
二、select元素还可以多选，看如下代码：
代码如下:
2 _1 o) e( P" E+ W//有multiple属性，则可以多选
1 F+ S4 v) v& l' o4 w! i<select name= “education” id=”education” multiple=”multiple”>
<option value=”1”>高中</option>
<option value=”2”>大学</option>
<option value=”3”>博士</option>
* R. m, s) {0 J8 ~</select>
//下面没有multiple属性 , 只显示一条，不能多选
<select name= “education” id=”education” >
% ?5 u' m( W$ N. ]" D<option value=”1”>高中</option>
<option value=”2”>大学</option>
<option value=”3”>博士</option>
</select>
//下面是设置了size属性的情况 , 如果size = 3 那么就显示三条数据，注意不能多选的。
<select name=education id=education size='3'>
<option value=0>小学</option>
; W! C) U: R6 G6 x7 G<option value=1>初中</option>
7 c5 h  g5 {1 N9 Q<option value=2>高中</option>
<option value=3>中专</option>
<option value=4>大专</option>
- J& Q2 J/ {1 _& \* }0 b- m  k( f<option value=5>本科</option>
1 A: s  K# N# V( ^: G" e! K0 K<option value=6>研究生</option>
<option value=7>博士</option>
- G3 i; u: X/ ~' C0 s# k& N<option value=8>博士后</option>
<option selected>请选择</option>
</select>
" F0 @) C! @/ j7 M" e* r三、多选select组件涉及的所有常用操作：
* U+ S4 v, Q; e# w0 y1. 判断select选项中是否存在指定值的item
3 q8 j4 v+ H4 Q3 d+ j" F代码如下:
* Q, S" M# o/ z- v9 j@param objselectid 将要验证的目标select组件的id
& j) c# g0 B5 ^: t. `8 q@param objitemvalue 将要验证是否存在的值
! M0 Z+ v( u# `function isselectitemexit(objselectid,objitemvalue) {
( W* H" m# {# o6 F. w+ qvar objselect = document.getelementbyid(objselectid);
var isexit = false;
if (null != objselect && typeof(objselect) != undefined) {
" \) P' |- H: X7 F/ Rfor(var i=0;i<objselect.options.length;i++) {
if(objselect.options.value == objitemvalue) {
2 T/ q9 r! N) T# F9 Lisexit = true;
5 Y" a: I) a' G$ H, C( m! F0 Wbreak;
}
}
}
: L; _/ x, f5 }1 j. E' `% w- Jreturn isexit;
}
2.向select选项中加入一个item
; ?6 T* ]- |* `6 T* ]$ L6 J$ V, D% W& |代码如下:
. w% X* ?: A3 b4 i: x@param objselectid 将要加入item的目标select组件的id
@param objitemtext 将要加入的item显示的内容
@param objitemvalue 将要加入的item的值
function addoneitemtoselect(objselectid,objitemtext,objitemvalue) {
- C  _8 N7 j- s! Z+ N/ wvar objselect = document.getelementbyid(objselectid);
if (null != objselect && typeof(objselect) != undefined) {
//判断是否该值的item已经在select中存在
if(isselectitemexit(objselectid,objitemvalue)) {
$.messager.alert('提示消息','该值的选项已经存在!','info');
0 m* R2 Z7 I1 G- Q} else {
. Q2 V/ b2 X( tvar varitem = new option(objitemtext,objitemvalue);
objselect.options.add(varitem);
}
}
}
3.从select选项中删除选中的项，支持多选多删
代码如下:
% V3 j! |7 L8 F: a6 e@param objselectid 将要进行删除的目标select组件id
. s$ H9 Q9 ?- o( P/ j7 Afunction removeselectitemsfromselect(objselectid) {
var objselect = document.getelementbyid(objselectid);
$ p0 t6 R8 b0 svar delnum = 0;
if (null != objselect && typeof(objselect) != undefined) {
% c: p4 m: [; c" v( Q$ ifor(var i=0;i<objselect.options.length;i=i+1) {
, [, I  N% E( ?  b2 u6 jif(objselect.options.selected) {
objselect.options.remove(i);
delnum = delnum + 1;
7 G* d* o4 T' z% `- u& ai = i - 1;
( ?1 s- m: ]$ b  U}
}
if (delnum <= 0 ) {
$.messager.alert('提示消息','请选择你要删除的选项!','info');
} else {
. t5 ^5 Z3 k4 x/ a9 |* c5 x$ o$.messager.alert('提示消息','成功删除了'+delnum+'个选项!','info');
}
}
; l% t6 o+ e" B}
0 l- e3 E! f7 U+ ~) N; U4.从select选项中按指定的值删除一个item
代码如下:
@param objselectid 将要验证的目标select组件的id
6 r8 z) \  w# m: m/ Y& ~@param objitemvalue 将要验证是否存在的值
0 p( i) ?" k+ C: efunction removeitemfromselectbyitemvalue(objselectid,objitemvalue) {
var objselect = document.getelementbyid(objselectid);
if (null != objselect && typeof(objselect) != undefined) {
//判断是否存在
# V6 @7 u! ^0 X) kif(isselectitemexit(objselect,objitemvalue)) {
for(var i=0;i<objselect.options.length;i++) {
! U( M* e+ F# }0 C, Nif(objselect.options.value == objitemvalue) {
1 r3 W( a  `0 dobjselect.options.remove(i);
, L$ V. H9 T" D3 @. j' o" ?break;
1 Y& z0 z/ R5 N% h" z3 M}
}
  H2 G/ Q$ a) v; i( x4 ]$.messager.alert('提示消息','成功删除!','info');
! D7 _) ^; Z( J; G} else {
$.messager.alert('提示消息','不存在指定值的选项!','info');
}
# B' V6 t6 ^, U% r9 C! P, |# }8 D+ l}
# U6 E0 K" D: w' X; t6 G}
3 Z( f; u. Q# _2 d5.清空select中的所有选项
代码如下:
6 N% b4 A0 Y. G9 Q1 _: }@param objselectid 将要进行清空的目标select组件id
function clearselect(objselectid) {
) m/ Y7 J( J# J$ [2 w* r; N8 a% G, hvar objselect = document.getelementbyid(objselectid);
if (null != objselect && typeof(objselect) != undefined) {
for(var i=0;i<objselect.options.length;) {
2 @9 c4 U+ M  [3 a# i. [objselect.options.remove(i);
}
}
}
: H& r% I3 [) L! G6. 获取select中的所有item，并且组装所有的值为一个字符串，值与值之间用逗号隔开
1 E& P; y7 n0 p代码如下:
( a4 J3 [3 }3 c6 x. I/ K& q@param objselectid 目标select组件id
6 y* y: E. c4 c. _7 G* o@return select中所有item的值，值与值之间用逗号隔开
function getallitemvaluesbystring(objselectid) {
var selectitemsvaluesstr = ;
9 O* N, h7 D$ x' Y" f% i' {var objselect = document.getelementbyid(objselectid);
, ]- R* {. Q: Q- Z9 n' F+ ~, ~8 ]if (null != objselect && typeof(objselect) != undefined) {
var length = objselect.options.length
for(var i = 0; i < length; i = i + 1) {
* w$ z3 l0 u) f; C$ Nif (0 == i) {
selectitemsvaluesstr = objselect.options.value;
} else {
5 x) q. _3 \& }/ x* Kselectitemsvaluesstr = selectitemsvaluesstr + , + objselect.options.value;
8 A2 O5 [& x: T- M/ x: V0 O}
3 X8 X4 c) i/ v0 \}
}
  z5 E+ q3 w/ e- T( Nreturn selectitemsvaluesstr;
% \$ g/ ?/ V) c, K1 F" ?* g}
7. 将一个select中的所有选中的选项移到另一个select中去
代码如下:
@param fromobjselectid 移动item的原select组件id
@param toobjectselectid 移动item将要进入的目标select组件id
' Y+ b+ j, ^/ c7 G! Jfunction moveallselectedtoanotherselectobject(fromobjselectid, toobjectselectid) {
var objselect = document.getelementbyid(fromobjselectid);
var delnum = 0;
; K1 p' u, p. w) oif (null != objselect && typeof(objselect) != undefined) {
. R# ~) }' f* F2 |4 I, [' ~* Mfor(var i=0;i<objselect.options.length;i=i+1) {
if(objselect.options.selected) {
" H/ }% r7 _$ o/ Z8 z" }  }addoneitemtoselect(toobjectselectid,objselect.options.text,objselect.options.value)
& x9 b) F2 T: b4 O' o3 U" {- Vobjselect.options.remove(i);
. A# J9 n2 u8 di = i - 1;
5 d- _% j- a& V4 ?) `, p* b& `+ a}
/ f4 S6 _) p% D2 X}
}
}
8. 将一个select中的所有选项移到另一个select中去
2 k5 _7 d/ M# [) d6 S1 W代码如下:
2 \" X# \8 S% Q! f* ?@param fromobjselectid 移动item的原select组件id
7 u' a" q% `2 m5 Z: x@param toobjectselectid 移动item将要进入的目标select组件id
function movealltoanotherselectobject(fromobjselectid, toobjectselectid) {
  u/ l# |. q' q. ovar objselect = document.getelementbyid(fromobjselectid);
if (null != objselect) {
7 U1 q. q  b" C. m3 D) d2 h9 K) nfor(var i=0;i<objselect.options.length;i=i+1) {
1 `1 l" n+ y$ W# J5 Xaddoneitemtoselect(toobjectselectid,objselect.options.text,objselect.options.value)
objselect.options.remove(i);
1 U( r" j3 v2 R: @& Q: Mi = i - 1;
}
' f3 k5 N; c# A3 N7 k}
; W, J( T5 ?' C9 o7 n, r}
+ e" w. ?, M  c8 r* Y1 ?4 F! `. Q
更多网页制作信息请查看： 网页制作

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

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

你该这么说~~

哦~~~明白了....

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

我是来收集资料滴...

今天统计好像出了问题