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

select 元素可创建单选或多选菜单。当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将 <select> 表单数据提交给服务器时包括 name 属性。
一、基本用法：
, a& i- g$ ?5 q4 v# [; T! J代码如下:
! H) c7 i" ]2 s7 f: v8 c<select>
<option value =volvo>volvo</option>
<option value =saab>saab</option>
1 H3 |" J  O) C. u3 p% v' _) f<option value=opel>opel</option>
& B, t" e4 h1 U& n5 n$ p<option value=audi>audi</option>
</select>
8 ?  z5 H/ W8 V. u; c3 D其中，</option>标签可以省掉，在页面中用法
9 |# Z7 R* L" S; @; D  Y代码如下:
, X) B" O2 F5 a$ n: o% t) @<select name=studycenter id=studycenter size=1>
<option value=0>全部
. V  S/ R! H5 `( \1 A<option value=1>湖北电大网络学习中心
<option value=2>成都师范学院网络学习中心
8 Y2 R, G7 z, U+ M<option value=3>武汉职业技术学院网络学习中心
* `; {" z/ m! p% K</select>
二、select元素还可以多选，看如下代码：
7 L% G) O$ {1 B7 E代码如下:
3 c9 n; s" a# R& u" o# o//有multiple属性，则可以多选
<select name= “education” id=”education” multiple=”multiple”>
5 ]) h; b& x- K: b) S. T<option value=”1”>高中</option>
/ n! D5 J4 I& v* i<option value=”2”>大学</option>
<option value=”3”>博士</option>
</select>
//下面没有multiple属性 , 只显示一条，不能多选
<select name= “education” id=”education” >
<option value=”1”>高中</option>
. @- m$ p; C" i<option value=”2”>大学</option>
<option value=”3”>博士</option>
+ B+ x3 ^4 R" m, `& v. i$ z' q</select>
//下面是设置了size属性的情况 , 如果size = 3 那么就显示三条数据，注意不能多选的。
  l, p3 t5 }8 R$ A<select name=education id=education size='3'>
' H* n+ J" h2 \$ L6 X<option value=0>小学</option>
<option value=1>初中</option>
<option value=2>高中</option>
<option value=3>中专</option>
+ G: ^4 H# S+ H6 b8 ?; X: G<option value=4>大专</option>
<option value=5>本科</option>
<option value=6>研究生</option>
<option value=7>博士</option>
<option value=8>博士后</option>
<option selected>请选择</option>
# X: }7 c+ S% F8 L$ j9 A8 G</select>
1 N$ T; m$ N" t( d5 W& D, M三、多选select组件涉及的所有常用操作：
1. 判断select选项中是否存在指定值的item
- D6 w8 H; u' M0 H代码如下:
@param objselectid 将要验证的目标select组件的id
" C) \+ u% H2 }@param objitemvalue 将要验证是否存在的值
function isselectitemexit(objselectid,objitemvalue) {
var objselect = document.getelementbyid(objselectid);
var isexit = false;
( S; Q4 o$ ^! l2 }$ Q; }  zif (null != objselect && typeof(objselect) != undefined) {
8 k5 l& i  r$ l' ufor(var i=0;i<objselect.options.length;i++) {
if(objselect.options.value == objitemvalue) {
isexit = true;
break;
}
) n: K, X3 }/ ]7 ?) P}
}
/ s+ G+ X  W8 p% {+ Y5 Yreturn isexit;
" u( R2 D0 P* F6 r0 r' x/ l4 b}
; J2 V7 f) J9 u" M% ?' v2.向select选项中加入一个item
代码如下:
' ^+ {  }1 ]% q2 p& c  {@param objselectid 将要加入item的目标select组件的id
@param objitemtext 将要加入的item显示的内容
, T' S) J! K0 ]9 f: T% J) N@param objitemvalue 将要加入的item的值
9 F9 o. F; q& S5 b9 D% f; }function addoneitemtoselect(objselectid,objitemtext,objitemvalue) {
var objselect = document.getelementbyid(objselectid);
! {0 p' K  j4 v3 tif (null != objselect && typeof(objselect) != undefined) {
//判断是否该值的item已经在select中存在
if(isselectitemexit(objselectid,objitemvalue)) {
  y7 g6 I7 |/ f+ b8 a# ^$.messager.alert('提示消息','该值的选项已经存在!','info');
} else {
var varitem = new option(objitemtext,objitemvalue);
" y4 i9 O- H0 z0 `objselect.options.add(varitem);
}
}
}
% \% y3 ?; U* N3.从select选项中删除选中的项，支持多选多删
1 ^' ]% h3 A7 h: a8 [- W" Q代码如下:
! n" L; E/ X% U% U) D( F@param objselectid 将要进行删除的目标select组件id
* Q6 X4 o1 H- b6 q8 X" Ifunction removeselectitemsfromselect(objselectid) {
5 z: {& e+ t0 c& |$ lvar objselect = document.getelementbyid(objselectid);
var delnum = 0;
8 b# R( `2 f/ W. C9 cif (null != objselect && typeof(objselect) != undefined) {
for(var i=0;i<objselect.options.length;i=i+1) {
; B' w) }8 k+ Lif(objselect.options.selected) {
objselect.options.remove(i);
8 d! ~$ x6 `  m5 v6 sdelnum = delnum + 1;
/ x& r$ e9 g1 H% xi = i - 1;
$ N  R2 x9 \: w+ F/ b! G; W}
}
; J1 R& c7 T5 G; r3 x  Uif (delnum <= 0 ) {
$.messager.alert('提示消息','请选择你要删除的选项!','info');
} else {
$.messager.alert('提示消息','成功删除了'+delnum+'个选项!','info');
}
}
}
: f% j! h; e) L9 b: T; @0 D1 R4.从select选项中按指定的值删除一个item
. d# j$ k, o) [代码如下:
; R1 v7 k% F$ x1 `@param objselectid 将要验证的目标select组件的id
; B! R  T6 i' r3 B@param objitemvalue 将要验证是否存在的值
5 U  ^3 W& Q* L6 w9 m; bfunction removeitemfromselectbyitemvalue(objselectid,objitemvalue) {
var objselect = document.getelementbyid(objselectid);
if (null != objselect && typeof(objselect) != undefined) {
4 ^' w! J: R; ?1 `; z1 j, d//判断是否存在
/ _6 `7 s( y1 e' dif(isselectitemexit(objselect,objitemvalue)) {
" y5 {& k4 I& b( c. X1 r7 tfor(var i=0;i<objselect.options.length;i++) {
# [/ P$ C" O5 m7 d+ }9 g) f' Sif(objselect.options.value == objitemvalue) {
9 i2 ?5 o0 x" Eobjselect.options.remove(i);
; {  U' U6 S6 N$ L6 E* ]$ Y$ U) ?break;
5 b9 Z% U! \$ ]6 R9 T' h* c}
}
) S/ X" k' x; z& y4 i' t, ]$.messager.alert('提示消息','成功删除!','info');
& R9 H: f& y8 f! u/ O. Z} else {
$.messager.alert('提示消息','不存在指定值的选项!','info');
}
}
}
# }" M) ]* J$ i7 ]0 |5.清空select中的所有选项
6 D# h4 J6 t5 E代码如下:
@param objselectid 将要进行清空的目标select组件id
function clearselect(objselectid) {
/ l* u- _, J! `- h6 J$ Nvar objselect = document.getelementbyid(objselectid);
if (null != objselect && typeof(objselect) != undefined) {
for(var i=0;i<objselect.options.length;) {
objselect.options.remove(i);
2 W; w* X3 q* m$ ^" b7 ~}
2 S' U# ]$ G$ ^/ M}
$ J2 N/ C& R. Z; r}
6. 获取select中的所有item，并且组装所有的值为一个字符串，值与值之间用逗号隔开
% z" K. P2 }, @- A4 A, @# s% C3 r代码如下:
@param objselectid 目标select组件id
8 O% \; w4 A, I1 m! ^% q9 n8 a@return select中所有item的值，值与值之间用逗号隔开
function getallitemvaluesbystring(objselectid) {
; K" c5 x5 l6 A% x, d! evar selectitemsvaluesstr = ;
8 B6 r( }6 t. x" M" c/ N, m6 c' j, Qvar objselect = document.getelementbyid(objselectid);
if (null != objselect && typeof(objselect) != undefined) {
- V! N. Z2 {; }  {3 Pvar length = objselect.options.length
/ C* s; U7 g, g( F( K& sfor(var i = 0; i < length; i = i + 1) {
if (0 == i) {
selectitemsvaluesstr = objselect.options.value;
. {* ?7 {/ B8 V* i  K/ D} else {
4 u* `4 B. a( Nselectitemsvaluesstr = selectitemsvaluesstr + , + objselect.options.value;
}
8 h8 O' a; Y* o, z/ E* k}
+ n2 g: X2 p' k; ]5 G}
return selectitemsvaluesstr;
8 q& W) k' V1 K: L* N}
7. 将一个select中的所有选中的选项移到另一个select中去
代码如下:
1 \- Y! F8 y1 p; }5 B- @@param fromobjselectid 移动item的原select组件id
@param toobjectselectid 移动item将要进入的目标select组件id
" W" n  A! ?" g) ]$ D5 v5 Dfunction moveallselectedtoanotherselectobject(fromobjselectid, toobjectselectid) {
6 H6 e9 `% }2 O! g$ evar objselect = document.getelementbyid(fromobjselectid);
5 S% Q: f8 T' Uvar delnum = 0;
9 S2 W5 P6 V" Q5 A7 Mif (null != objselect && typeof(objselect) != undefined) {
. J- b4 T, J1 R4 X+ j( Cfor(var i=0;i<objselect.options.length;i=i+1) {
if(objselect.options.selected) {
- X. _6 n5 W! {# L6 F: u: ?/ paddoneitemtoselect(toobjectselectid,objselect.options.text,objselect.options.value)
/ N& g, L$ e  \1 b  T# W; |" Dobjselect.options.remove(i);
i = i - 1;
}
4 i. O/ Y* ]2 i& V4 V}
. R; t3 u% w; l}
& z0 ~; [+ b8 N+ c3 O7 f* _5 K}
8. 将一个select中的所有选项移到另一个select中去
代码如下:
3 _# ]" |4 a8 ~2 w4 D@param fromobjselectid 移动item的原select组件id
- H/ p3 y7 Z2 \2 `5 R) r( V@param toobjectselectid 移动item将要进入的目标select组件id
# e; l' n. v" {; W* j. sfunction movealltoanotherselectobject(fromobjselectid, toobjectselectid) {
; @8 ]* G* s7 x9 U# b/ p. b; y; Zvar objselect = document.getelementbyid(fromobjselectid);
if (null != objselect) {
( p+ X/ {/ O: g6 f% d( _for(var i=0;i<objselect.options.length;i=i+1) {
addoneitemtoselect(toobjectselectid,objselect.options.text,objselect.options.value)
objselect.options.remove(i);
7 W- Q+ b. ?5 H& H" [0 ei = i - 1;
}
: H6 Q5 l# K6 T6 t+ `/ M}
& [& R! }! h& j" h( Q3 S* l}
7 \2 F. l9 F4 @$ f) K: n
更多网页制作信息请查看： 网页制作

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

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

你该这么说~~

哦~~~明白了....

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

我是来收集资料滴...

今天统计好像出了问题