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

select 元素可创建单选或多选菜单。当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将 <select> 表单数据提交给服务器时包括 name 属性。
1 v* E: e. ^2 {* u! X/ B* g一、基本用法：
代码如下:
0 t1 c& R# _0 s; V% H/ {9 `<select>
<option value =volvo>volvo</option>
<option value =saab>saab</option>
+ R; S# a* {2 ]8 y<option value=opel>opel</option>
( N! D2 R) I4 F9 a<option value=audi>audi</option>
</select>
" v4 `* M  R" o$ i# ]% {, \其中，</option>标签可以省掉，在页面中用法
& q6 c1 ^* n% P4 Y7 y/ o代码如下:
" r. D2 n- v/ a- T" C<select name=studycenter id=studycenter size=1>
<option value=0>全部
<option value=1>湖北电大网络学习中心
<option value=2>成都师范学院网络学习中心
% u( @2 ~8 L0 Q# p/ l% W1 |2 R<option value=3>武汉职业技术学院网络学习中心
  e: x; ], ~1 j" u9 |$ N. c</select>
二、select元素还可以多选，看如下代码：
代码如下:
" G" p: g  H. W//有multiple属性，则可以多选
<select name= “education” id=”education” multiple=”multiple”>
' M7 [$ `- @; _, m: z: t. Y<option value=”1”>高中</option>
* c' R; T" X% D5 b& E' o0 S# n<option value=”2”>大学</option>
<option value=”3”>博士</option>
) q% H# O' ~: h9 ]</select>
//下面没有multiple属性 , 只显示一条，不能多选
' `* y' w# q) b8 T! v<select name= “education” id=”education” >
* E  z( B3 _: ~- I' W<option value=”1”>高中</option>
<option value=”2”>大学</option>
<option value=”3”>博士</option>
</select>
//下面是设置了size属性的情况 , 如果size = 3 那么就显示三条数据，注意不能多选的。
<select name=education id=education size='3'>
$ h2 g; x  @$ d5 I. @% Z<option value=0>小学</option>
<option value=1>初中</option>
3 G/ x6 Z# ^  M  \* b* @<option value=2>高中</option>
<option value=3>中专</option>
<option value=4>大专</option>
<option value=5>本科</option>
<option value=6>研究生</option>
<option value=7>博士</option>
<option value=8>博士后</option>
<option selected>请选择</option>
" w. ~6 k6 n& J9 i+ S1 F: W</select>
三、多选select组件涉及的所有常用操作：
' P) p' J( ]! W: B6 {) l9 m1. 判断select选项中是否存在指定值的item
代码如下:
1 k+ N* {" H) }7 @3 b@param objselectid 将要验证的目标select组件的id
@param objitemvalue 将要验证是否存在的值
' ]5 {- q! l3 _2 n% E8 S+ j" Xfunction isselectitemexit(objselectid,objitemvalue) {
var objselect = document.getelementbyid(objselectid);
" q+ x6 G! X5 k* Zvar isexit = false;
# v8 F4 u' b* [5 Wif (null != objselect && typeof(objselect) != undefined) {
! ~  g) _  L/ d& q/ O3 gfor(var i=0;i<objselect.options.length;i++) {
. D7 T$ m, {4 f; |( uif(objselect.options.value == objitemvalue) {
" T( h& x2 \0 F% B' O( ?isexit = true;
break;
& p9 e! ^/ {5 r2 ~* q0 o$ C- z}
}
1 T/ C  z7 f1 e8 V}
return isexit;
8 ]  `0 U3 T8 i& Y" B- l% j}
( T( s" A! o- M1 f2.向select选项中加入一个item
' X1 K1 O. N: S% ?! h4 P/ n代码如下:
@param objselectid 将要加入item的目标select组件的id
3 Z7 H% `  n1 c2 v' z0 x( q: `; \@param objitemtext 将要加入的item显示的内容
* Q5 f+ x2 k/ K1 N- Q7 j9 r' D@param objitemvalue 将要加入的item的值
function addoneitemtoselect(objselectid,objitemtext,objitemvalue) {
4 \: m2 R7 ~7 rvar objselect = document.getelementbyid(objselectid);
3 H$ h) ]1 x4 S" P- g7 O* bif (null != objselect && typeof(objselect) != undefined) {
" |* ]+ F1 q' }+ b" N1 A" t//判断是否该值的item已经在select中存在
if(isselectitemexit(objselectid,objitemvalue)) {
' z; O2 }5 Z+ m. V, p$.messager.alert('提示消息','该值的选项已经存在!','info');
} else {
var varitem = new option(objitemtext,objitemvalue);
objselect.options.add(varitem);
) \6 \. ?9 {0 [6 _9 l0 e4 f" }7 ]}
5 x8 x7 ?! \* X) V}
}
3.从select选项中删除选中的项，支持多选多删
代码如下:
6 a* N/ f+ Z# u' V@param objselectid 将要进行删除的目标select组件id
function removeselectitemsfromselect(objselectid) {
% R" m; I$ G4 Svar objselect = document.getelementbyid(objselectid);
& s7 z7 p  K0 i  b% f  A& f4 avar delnum = 0;
if (null != objselect && typeof(objselect) != undefined) {
/ {# a" @. x- v9 _; C5 rfor(var i=0;i<objselect.options.length;i=i+1) {
if(objselect.options.selected) {
objselect.options.remove(i);
5 R1 @  i4 S, ^6 R3 Y8 udelnum = delnum + 1;
- \( n' n) @  ^3 M( mi = i - 1;
# e: n$ m# ~) L  |$ x' W}
}
if (delnum <= 0 ) {
$.messager.alert('提示消息','请选择你要删除的选项!','info');
3 U" u+ d: @, B) ]9 Q3 [( W- K} else {
7 F1 `( ?' X9 d  m" O5 V. Y/ e1 @$ l$.messager.alert('提示消息','成功删除了'+delnum+'个选项!','info');
}
- U/ T# {) [; d# ^}
% `* O! D6 b5 \$ |}
- [& }9 [5 H2 b% _; g- W) o& K- i) P# y! @4.从select选项中按指定的值删除一个item
3 p1 O6 e; k5 Y! Q: I代码如下:
@param objselectid 将要验证的目标select组件的id
@param objitemvalue 将要验证是否存在的值
$ e$ J% ~) j' ]) E* ]9 Lfunction removeitemfromselectbyitemvalue(objselectid,objitemvalue) {
2 U& o  j. o+ Q0 x8 Xvar objselect = document.getelementbyid(objselectid);
8 _2 H' B4 Y. _* Nif (null != objselect && typeof(objselect) != undefined) {
//判断是否存在
if(isselectitemexit(objselect,objitemvalue)) {
/ q1 w8 h- f* E9 f$ C7 l6 e( ifor(var i=0;i<objselect.options.length;i++) {
: P( f7 x4 x8 b, ^if(objselect.options.value == objitemvalue) {
! v6 o9 o& T! n( E' |6 Wobjselect.options.remove(i);
break;
}
}
, c3 L4 @+ }6 w$ m! D& @# {$.messager.alert('提示消息','成功删除!','info');
; _  u1 R* |+ t& s3 f8 a  E0 U# F} else {
9 P2 X% A  [- A5 }# o$ w; k2 S" B+ {$.messager.alert('提示消息','不存在指定值的选项!','info');
1 E4 ?- P1 S$ C# N! [1 I6 Y7 U}
}
}
5.清空select中的所有选项
& A2 `' g- j( ^: F- g代码如下:
7 a; @8 n9 }2 ^1 Z/ D0 C# f8 s@param objselectid 将要进行清空的目标select组件id
( O8 J3 N7 z1 ^( u: n& D: gfunction clearselect(objselectid) {
var objselect = document.getelementbyid(objselectid);
5 P2 O  M( r, c2 Z0 O2 R+ Gif (null != objselect && typeof(objselect) != undefined) {
, `$ I" k  r- V( m; J4 p% ffor(var i=0;i<objselect.options.length;) {
! N% _  u; q! ]6 pobjselect.options.remove(i);
}
: y9 v' B: F- _7 U( ~}
}
+ j# a1 A& t9 a" k3 z6. 获取select中的所有item，并且组装所有的值为一个字符串，值与值之间用逗号隔开
: {( z. k- |# g5 T2 F3 J代码如下:
( E4 R, e& _1 D2 H@param objselectid 目标select组件id
# x5 c5 t" F" _+ r@return select中所有item的值，值与值之间用逗号隔开
9 q& `4 `$ ]* Efunction getallitemvaluesbystring(objselectid) {
) m6 q: z8 @; C* Fvar selectitemsvaluesstr = ;
: |( }2 B2 @, W' y, l  S3 Gvar objselect = document.getelementbyid(objselectid);
/ U/ `8 ^' o0 F9 L( [- H5 q( Dif (null != objselect && typeof(objselect) != undefined) {
var length = objselect.options.length
for(var i = 0; i < length; i = i + 1) {
if (0 == i) {
selectitemsvaluesstr = objselect.options.value;
} else {
1 J  }: v. H9 ?1 d' \$ o4 h$ eselectitemsvaluesstr = selectitemsvaluesstr + , + objselect.options.value;
1 x: q& c5 S5 A# ^}
  E3 i- J0 I' [; B; T}
}
7 h- B% u5 l8 l2 y- i! A2 |2 b$ y, `return selectitemsvaluesstr;
}
7. 将一个select中的所有选中的选项移到另一个select中去
% v; \: M, N4 ?# K" K' r代码如下:
@param fromobjselectid 移动item的原select组件id
/ g3 B: a3 }5 j- j" N@param toobjectselectid 移动item将要进入的目标select组件id
5 X6 r9 C# t9 |function moveallselectedtoanotherselectobject(fromobjselectid, toobjectselectid) {
var objselect = document.getelementbyid(fromobjselectid);
2 ?& A  {; \! i5 Q3 Evar delnum = 0;
if (null != objselect && typeof(objselect) != undefined) {
for(var i=0;i<objselect.options.length;i=i+1) {
if(objselect.options.selected) {
addoneitemtoselect(toobjectselectid,objselect.options.text,objselect.options.value)
$ ^9 L. @& t6 tobjselect.options.remove(i);
# p# A: ~5 O: }% f1 [2 Oi = i - 1;
}
}
}
}
8. 将一个select中的所有选项移到另一个select中去
代码如下:
@param fromobjselectid 移动item的原select组件id
1 h" R4 P! D% }) f! Z; t@param toobjectselectid 移动item将要进入的目标select组件id
5 T2 y4 t- P9 E" v1 `" H% rfunction movealltoanotherselectobject(fromobjselectid, toobjectselectid) {
var objselect = document.getelementbyid(fromobjselectid);
1 S/ |9 m4 y5 W1 Dif (null != objselect) {
; [( @' q" w5 @( Zfor(var i=0;i<objselect.options.length;i=i+1) {
  v( z0 S. r9 h- ]addoneitemtoselect(toobjectselectid,objselect.options.text,objselect.options.value)
# L5 m4 o& U" l" M7 W1 s2 P+ o9 s, bobjselect.options.remove(i);
i = i - 1;
}
. [2 }9 e$ j( N5 ?3 C# W2 }, {/ a- C}
) w' y% N4 \4 F}
# g  L% g$ Z9 f; O
; |; A) p: o% s9 B更多网页制作信息请查看： 网页制作

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

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

你该这么说~~

哦~~~明白了....

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

我是来收集资料滴...

今天统计好像出了问题