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

select 元素可创建单选或多选菜单。当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表，并且在将 <select> 表单数据提交给服务器时包括 name 属性。
一、基本用法：
代码如下:
3 B2 P$ Z" @! M, W' \" g+ B<select>
: R9 K; }' j# X( ~<option value =volvo>volvo</option>
5 H; d+ Q% X. c5 R- ?3 O<option value =saab>saab</option>
7 c3 z% B0 n4 n5 u! c, p8 Q4 W<option value=opel>opel</option>
0 y2 S6 S8 y7 P<option value=audi>audi</option>
7 T# T$ y6 m1 v+ _' J</select>
其中，</option>标签可以省掉，在页面中用法
* B8 [/ I  ?1 l代码如下:
# u9 k/ A3 m1 _<select name=studycenter id=studycenter size=1>
<option value=0>全部
<option value=1>湖北电大网络学习中心
<option value=2>成都师范学院网络学习中心
/ j4 U3 D& f& Z% Z* ]<option value=3>武汉职业技术学院网络学习中心
. G/ ~% C6 V) `/ M' w</select>
1 O5 E- a0 C3 r' B二、select元素还可以多选，看如下代码：
代码如下:
$ Q7 V: M* D; Z- W  j/ m# L1 G//有multiple属性，则可以多选
% H6 r) R* I; w3 |<select name= “education” id=”education” multiple=”multiple”>
<option value=”1”>高中</option>
<option value=”2”>大学</option>
<option value=”3”>博士</option>
) o! O8 k( L2 c7 l' l# }' Y</select>
2 C7 `( V. f+ b% [//下面没有multiple属性 , 只显示一条，不能多选
& O' g* O# }( l5 `' C5 B# @/ W<select name= “education” id=”education” >
9 H! K5 N( \9 b) ^<option value=”1”>高中</option>
) o  V. D' z' d8 ]. }7 {<option value=”2”>大学</option>
<option value=”3”>博士</option>
</select>
//下面是设置了size属性的情况 , 如果size = 3 那么就显示三条数据，注意不能多选的。
<select name=education id=education size='3'>
( p# Z0 d, l$ e<option value=0>小学</option>
2 p8 o6 \5 ]- O  X# A/ F: ]<option value=1>初中</option>
# x0 G8 i( v! Z8 _' |0 F" o0 ~/ G<option value=2>高中</option>
<option value=3>中专</option>
<option value=4>大专</option>
<option value=5>本科</option>
<option value=6>研究生</option>
<option value=7>博士</option>
7 a" M& |9 y9 y0 h+ b) E7 K" ~9 l4 d1 M<option value=8>博士后</option>
8 F8 _$ ^/ g- L' o<option selected>请选择</option>
</select>
) f9 z  e) ?; I三、多选select组件涉及的所有常用操作：
) N1 A/ P/ w6 X2 f. t( G1. 判断select选项中是否存在指定值的item
( ~+ S. K" L4 ^; u; `+ C; q: K代码如下:
) W, O, }3 [! o  x& t- f+ S  S; T@param objselectid 将要验证的目标select组件的id
" H" C! P2 @7 w9 `@param objitemvalue 将要验证是否存在的值
$ |3 g2 d* S( \- i" hfunction isselectitemexit(objselectid,objitemvalue) {
# R" @5 R0 O5 u6 R4 t" mvar objselect = document.getelementbyid(objselectid);
var isexit = false;
if (null != objselect && typeof(objselect) != undefined) {
for(var i=0;i<objselect.options.length;i++) {
if(objselect.options.value == objitemvalue) {
isexit = true;
break;
; D4 V$ Z- m3 J1 m# _+ E! o}
}
}
return isexit;
/ s/ _! F+ O+ x) C/ Z8 k7 v}
2.向select选项中加入一个item
* g1 u- l; p$ g4 V$ G代码如下:
@param objselectid 将要加入item的目标select组件的id
; q5 `% _1 I) @6 ~@param objitemtext 将要加入的item显示的内容
@param objitemvalue 将要加入的item的值
function addoneitemtoselect(objselectid,objitemtext,objitemvalue) {
( \: m- [7 g9 I0 n' @3 Fvar objselect = document.getelementbyid(objselectid);
- g  _8 V: J- ^9 h8 Yif (null != objselect && typeof(objselect) != undefined) {
//判断是否该值的item已经在select中存在
) B+ T3 k3 y- {  F. Xif(isselectitemexit(objselectid,objitemvalue)) {
$.messager.alert('提示消息','该值的选项已经存在!','info');
} else {
4 H% K! \+ a3 V$ D( q( K. w# Vvar varitem = new option(objitemtext,objitemvalue);
objselect.options.add(varitem);
}
1 Z$ r+ g% F" O}
}
3.从select选项中删除选中的项，支持多选多删
; P- Z4 c3 C; M$ f9 L5 M; \代码如下:
" _- L( A% \2 X1 E+ m@param objselectid 将要进行删除的目标select组件id
3 b+ G7 B$ C" P( P- E7 Z1 k1 yfunction removeselectitemsfromselect(objselectid) {
2 q( y( d7 F: o7 svar objselect = document.getelementbyid(objselectid);
var delnum = 0;
if (null != objselect && typeof(objselect) != undefined) {
for(var i=0;i<objselect.options.length;i=i+1) {
1 \3 f% q+ v; p8 i* ^) V& G4 @# g* ?if(objselect.options.selected) {
% v# u/ \! `7 g6 Bobjselect.options.remove(i);
6 ~4 |0 m/ r# B! x3 b0 f2 v5 Jdelnum = delnum + 1;
i = i - 1;
* R1 v/ b+ L' m& t: U# P: |- l% N}
}
% u& H1 K+ t7 R6 V2 Y/ Lif (delnum <= 0 ) {
6 s% k9 {3 @- ~  A( q1 c/ a$.messager.alert('提示消息','请选择你要删除的选项!','info');
} else {
$.messager.alert('提示消息','成功删除了'+delnum+'个选项!','info');
}
, ?! \5 `" l) g}
}
! G4 E( [& M& k$ t, f4.从select选项中按指定的值删除一个item
代码如下:
$ P' ]  ^" I1 P3 _' Q8 A@param objselectid 将要验证的目标select组件的id
@param objitemvalue 将要验证是否存在的值
/ [/ |/ h. z' ]# U$ Z- pfunction removeitemfromselectbyitemvalue(objselectid,objitemvalue) {
# `5 u& f4 k5 @: ~var objselect = document.getelementbyid(objselectid);
if (null != objselect && typeof(objselect) != undefined) {
3 S; A& D* ]# ?/ o4 L" X# Q//判断是否存在
if(isselectitemexit(objselect,objitemvalue)) {
for(var i=0;i<objselect.options.length;i++) {
if(objselect.options.value == objitemvalue) {
objselect.options.remove(i);
9 B& [  h' i' R& [5 L9 S' Mbreak;
0 v& @1 k# g+ p: m: v2 u}
: H/ r; L, i5 D4 D* {- ~0 S}
$.messager.alert('提示消息','成功删除!','info');
. l8 w$ n6 b& h# s  I& @8 B5 J$ d/ V} else {
$.messager.alert('提示消息','不存在指定值的选项!','info');
}
. ^# H' R- S8 k' e}
}
: @3 K7 x/ P" [7 ~# y) S6 D' ?6 d5.清空select中的所有选项
; m, Z! O" H# K! V4 ^" f! L代码如下:
0 z7 X* s$ ~7 H2 Y5 J. l( y% F$ m@param objselectid 将要进行清空的目标select组件id
6 x" i% Z$ n: y4 v) {* M2 Ffunction clearselect(objselectid) {
: I* I- I3 K3 cvar objselect = document.getelementbyid(objselectid);
if (null != objselect && typeof(objselect) != undefined) {
3 i& ~& p4 D# S# v0 T' ]/ bfor(var i=0;i<objselect.options.length;) {
objselect.options.remove(i);
}
}
7 x# S; r2 |* J9 y# B; e}
. w" x' k; B. U2 q6. 获取select中的所有item，并且组装所有的值为一个字符串，值与值之间用逗号隔开
代码如下:
@param objselectid 目标select组件id
) s6 `0 u+ O% M- j@return select中所有item的值，值与值之间用逗号隔开
function getallitemvaluesbystring(objselectid) {
var selectitemsvaluesstr = ;
' Y9 t, h; G$ h8 ]; b5 rvar objselect = document.getelementbyid(objselectid);
  y: a9 F5 R$ g) v% Wif (null != objselect && typeof(objselect) != undefined) {
2 E( A& S2 [+ T1 D2 ivar length = objselect.options.length
for(var i = 0; i < length; i = i + 1) {
8 I: @, p. r# [if (0 == i) {
& p& m5 G7 K/ j! Pselectitemsvaluesstr = objselect.options.value;
} else {
9 s+ L- K3 n& hselectitemsvaluesstr = selectitemsvaluesstr + , + objselect.options.value;
}
}
}
/ @: [# W, O2 o. Qreturn selectitemsvaluesstr;
. N4 k) i8 z& s% Q3 i3 q}
7. 将一个select中的所有选中的选项移到另一个select中去
1 X) c& x  E& @/ r* {/ u: L代码如下:
@param fromobjselectid 移动item的原select组件id
@param toobjectselectid 移动item将要进入的目标select组件id
  ~/ C& a+ i# v  g, Lfunction moveallselectedtoanotherselectobject(fromobjselectid, toobjectselectid) {
& s, j5 q) D3 Ovar objselect = document.getelementbyid(fromobjselectid);
" @2 f! K' N8 {, r2 Q% T; Cvar delnum = 0;
if (null != objselect && typeof(objselect) != undefined) {
# F- U+ j$ U4 b# c/ s( z; ]for(var i=0;i<objselect.options.length;i=i+1) {
if(objselect.options.selected) {
addoneitemtoselect(toobjectselectid,objselect.options.text,objselect.options.value)
4 W5 P5 b1 W! I8 {  Vobjselect.options.remove(i);
i = i - 1;
}
3 S; [( y0 o& w}
- d3 q: F' G/ T7 J& i}
}
2 a6 B8 p8 z% X8. 将一个select中的所有选项移到另一个select中去
代码如下:
@param fromobjselectid 移动item的原select组件id
@param toobjectselectid 移动item将要进入的目标select组件id
function movealltoanotherselectobject(fromobjselectid, toobjectselectid) {
var objselect = document.getelementbyid(fromobjselectid);
9 x0 v/ m1 J6 }" _" g1 L: pif (null != objselect) {
; x/ e4 g# N( e, ?+ d* Y& O/ dfor(var i=0;i<objselect.options.length;i=i+1) {
addoneitemtoselect(toobjectselectid,objselect.options.text,objselect.options.value)
) O% n! T4 B; M) T. l) z* g9 oobjselect.options.remove(i);
i = i - 1;
' e$ [6 H+ j6 U! P, \}
}
}

更多网页制作信息请查看： 网页制作

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

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

你该这么说~~

哦~~~明白了....

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

我是来收集资料滴...

今天统计好像出了问题