怎样得到select所有option里的值
問(wèn)：
一個(gè)頁(yè)面里有個(gè)復(fù)選select 因?yàn)閛ption是動(dòng)態(tài)變化的
我想在提交后得到這個(gè)select里所有option的value
<select multiple name=test>
?? <option value=1>1</option>
<option value=2>2</option>
</select>
不管是否選中
那位能告訴我怎么做
______________________________________________________________________________________________
答1：
var o = document.formName.test
s="
for(i=0;i<o.options.length;i++){
s+=o.options[i].text+":"
if(o.options[i].selected) alert(o.options[i].text)
}
alert(s)
______________________________________________________________________________________________
答2：
最好別用test做名字，會(huì)有錯(cuò)的
______________________________________________________________________________________________
答3：
提交后要想得到所有的value
必須在提交之前把所有option置為選中
listLength = Frm.selectOperPoint.options.length;
for(i=0;i<listLength;i++)
{
????? Frm.selectOperPoint.options[i].selected = true;
}
______________________________________________________________________________________________
答4：
這個(gè)語(yǔ)句只能在test所在的頁(yè)面使用吧，我要在提交后的頁(yè)面得到結(jié)果
______________________________________________________________________________________________
答5：
我向做的是個(gè)就業(yè)系統(tǒng)，里面有個(gè)就業(yè)地點(diǎn)選擇，這個(gè)是多選的，是由另外一個(gè)多選select
點(diǎn)擊到另外一個(gè)復(fù)選select的，我里面有個(gè)功能就是移除所選中的option
我想提交后能得到所有option的值，因?yàn)橐粋€(gè)option代表一個(gè)用戶愿意工作的地點(diǎn)
______________________________________________________________________________________________
答6：
我看網(wǎng)易的就業(yè)系統(tǒng)就是這樣做的 ，但是我不知道他那個(gè)怎么處理提交后的數(shù)據(jù)，把用戶選中地點(diǎn)存到數(shù)據(jù)庫(kù)，我想他應(yīng)該是得到了所有option的值，而且我試了，他是你不管是否選中，都能得到所有的值
______________________________________________________________________________________________
答7：
<html>
<script language="javascript">
function btnClick()
{
var i
var s=""
for(i=0;i<document.all.item("num").length;i++)
{
? s=s+document.all.item("num").options[i].value+","
? alert(s)
}
document.all.item("result").value=s
alert(
"s="+document.all.item("result").value)
document.all.item("fmSel").submit
}
</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 1</title>
</head>
<body>
<form name=fmSel action"">
<select name=num size=1 ><option value=1>1</option><option value=2>2</option></select>
<input type=hidden name=result value="">
<input type=button name=btn value=click οnclick="btnClick();">
</form>
</body>
</html>
______________________________________________________________________________________________
答8：
options[i].text
______________________________________________________________________________________________
答9：
option 操作的例子
htm
<html>
<head>
<style type="text/css">
TABLE {
?width:100%;
}
TD {
?text-align:center;
}
SELECT {
?behavior:url("list.htc");width:100px;height:200px;
}
INPUT {
?behavior:url("list.htc")
}
</style>
</head>
<body>
<table>
?<tr>
??<td colspan="3">刪除移動(dòng)的項(xiàng)、檢查重復(fù)項(xiàng)、按照value排序（從小到大）</td>
?</tr>
?</tr>
??<td>
???<select id="aaa" multiple ref="bbb" order="value" deleted check>
????<option value="1">1</option>
????<option value="2">2</option>
????<option value="3">3</option>
????<option value="4">4</option>
????<option value="5">5</option>
????<option value="6">6</option>
???</select>
??</td>
??<td>
???<input type="button" value="全部選擇" ref="aaa" selectall><br>
???<input type="button" value="??? > >??? " ref="aaa"><br>
???<input type="button" value="??? < <??? " ref="bbb"><br>
???<input type="button" value="全部取消" ref="bbb" selectall><br>
??</td>
??<td>
???<select id="bbb" multiple ref="aaa" order="value" deleted check>
????<option value="7">7</option>
???</select>
??</td>
?</tr>
</table>
<hr>
<table>
?<tr>
??<td colspan="3">不刪除移動(dòng)的項(xiàng)、不檢查重復(fù)項(xiàng)、按照ord倒序（從大到小）</td>
?</tr>
?</tr>
??<td>
???<select id="ccc" multiple ref="ddd" order="ord" desc>
????<option value="1" ord="1">1</option>
????<option value="2" ord="5">2</option>
????<option value="3" ord="2">3</option>
????<option value="4" ord="6">4</option>
????<option value="5" ord="3">5</option>
????<option value="6" ord="7">6</option>
???</select>
??</td>
??<td>
???<input type="button" value="全部選擇" ref="ccc" selectall><br>
???<input type="button" value="??? > >??? " ref="ccc"><br>
???<input type="button" value="??? < <??? " ref="ddd"><br>
???<input type="button" value="全部取消" ref="ddd" selectall><br>
??</td>
??<td>
???<select id="ddd" multiple ref="ccc" order="ord" desc>
????<option value="7" ord="4">7</option>
???</select>
??</td>
?</tr>
</table>
<hr>
<table>
?<tr>
??<td colspan="3">不刪除移動(dòng)的項(xiàng)、檢查重復(fù)項(xiàng)、按照ord倒序（從大到小）</td>
?</tr>
?</tr>
??<td>
???<select id="eee" multiple ref="fff" order="ord" desc check>
????<option value="1" ord="1">1</option>
????<option value="2" ord="5">2</option>
????<option value="3" ord="2">3</option>
????<option value="4" ord="6">4</option>
????<option value="5" ord="3">5</option>
????<option value="6" ord="7">6</option>
???</select>
??</td>
??<td>
???<input type="button" value="全部選擇" ref="eee" selectall><br>
???<input type="button" value="??? > >??? " ref="eee"><br>
???<input type="button" value="??? < <??? " ref="fff"><br>
???<input type="button" value="全部取消" ref="fff" selectall><br>
???<input type="button" value="選中左邊列表所有的項(xiàng)" οnclick="eee.selectAll()"><br>
???<input type="button" value="取消左邊列表中選中的項(xiàng)" οnclick="eee.selectNone()"><br>
???<input type="button" value="刪除左邊列表中選中的項(xiàng)" οnclick="eee.deleted()"><br>
??</td>
??<td>
???<select id="fff" multiple ref="eee" order="ord" desc check>
????<option value="7" ord="4">7</option>
???</select>
??</td>
?</tr>
</table>
</body>
</html>
______________________________________________________________________________________________
答10：
list.htc
//刪除所有選中的項(xiàng)
<PUBLIC:METHOD NAME="deleted" />
//選中所有項(xiàng)
<PUBLIC:METHOD NAME="selectAll" />
//取消選中的項(xiàng)
<PUBLIC:METHOD NAME="selectNone" />
<PUBLIC:ATTACH EVENT="onclick" ONEVENT="doClick()" />
<PUBLIC:ATTACH EVENT="ondblclick"? ONEVENT="doDblClick()" />
<script language="JScript">
//從列表框中刪除所有選中的項(xiàng)。如果obj為null，則列表框?yàn)樽陨怼?br /> function deleted(obj) {
?if (obj == null) obj = element;
?if (obj.tagName != "SELECT") return;
?for (var i=obj.options.length-1;i>=0;i--) {
??if (obj.options[i].selected) {
???obj.options.remove(i);
??}
?}
}
//選中給定的列表框中所有的項(xiàng)。如果obj為null，則列表框?yàn)樽陨怼?br /> function selectAll(obj) {
?if (obj == null) obj = element;
?if (obj.tagName != "SELECT") return;
?var length = obj.options.length;
?for (var i=0;i<length;i++) {
??obj.options[i].selected = true;
?}
}
//取消給定的列表框中所有選中的項(xiàng)。如果obj為null，則列表框?yàn)樽陨怼?br /> function selectNone(obj) {
?if (obj == null) obj = element;
?if (obj.tagName != "SELECT") return;
?var length = obj.options.length;
?for (var i=0;i<length;i++) {
??obj.options[i].selected = false;
?}
}
//檢查obj列表框中是否已經(jīng)存在選項(xiàng)opt
function optionExists(obj,opt) {
?var length = obj.options.length;
?for (var i=0;i<length;i++) {
??if (obj.options[i].text == opt.text && obj.options[i].value == opt.value)?//如果一個(gè)選項(xiàng)的值和文本與給定的選項(xiàng)相同，則表明存在。
???return true;
?}
?return false;?//如果不存在，則返回false
}
//將列表框obj1中選中的項(xiàng)添加到obj2列表框中，check=true表示不向obj2中的添加重復(fù)項(xiàng)
function add(obj1,obj2,check) {
?for (var i=0;i<obj1.options.length;i++) {
??if (obj1.options[i].selected) {??//如果選項(xiàng)被選中，則需要加入到obj2中。
???if (check) {?//需要進(jìn)行重復(fù)性檢查
????if (optionExists(obj2,obj1.options[i])) {?//如果obj2列表框中存在指定的選項(xiàng)，進(jìn)行下一個(gè)循環(huán)
?????continue;
????}
???}
???var opt = obj1.options[i].cloneNode(false);
???opt.text = obj1.options[i].text;
???obj2.options.add(opt);??//將選項(xiàng)加入到ojb2中。
??}
?}
}
//排序，obj為列表框?qū)ο?#xff0c;order為排序?qū)傩?#xff0c;desc為是否倒序(true-倒序)，采用冒泡算法的改進(jìn)算法
function orderList(obj,order,desc) {
?var chg = null;
?var flag = true;?//是否進(jìn)行過(guò)交換的標(biāo)志
?var m = null;
?var n = null;
?var len = obj.options.length - 1;
?for (var j=len;j>0;j--) {
??flag = true;
??for (var k=0;k<j;k++) {
???eval("m = parseFloat(obj.options[k]." + order + ");");
???eval("n = parseFloat(obj.options[k+1]." + order + ");");
???if (desc) {??//如果是倒序排列，則交換m和n
????var tt = m;
????m = n;
????n = tt;
???}
???if (m > n) {?//如果m > n 交換兩個(gè)選項(xiàng)
????chg = obj.options[k].cloneNode(false);
????chg.text = obj.options[k].text;
????obj.options[k] = obj.options[k+1].cloneNode(false);
????obj.options[k].text = obj.options[k+1].text;
????obj.options[k+1] = chg.cloneNode(false);
????obj.options[k+1].text = chg.text;
????flag = false;??//交換過(guò)，設(shè)為false
???}
??}
??if (flag) break;??//如果一次都沒(méi)有交還，則退出
?}
}
//事件處理
function doEvent() {
?var obj1 = null;??//列表框1變量
?if (window.event.srcElement.tagName == "SELECT") {?//如果觸發(fā)元素是select
??obj1 = window.event.srcElement;??//obj為觸發(fā)的select
?}
?else if (window.event.srcElement.tagName == "OPTION") {?//如果觸發(fā)元素是option
??obj1 = window.event.srcElement.parentElement;??//obj為觸發(fā)元素的父元素select
?}
?else {
??if (typeof(window.event.srcElement.ref) != "undefined") {?//如果ref被定義過(guò)
???obj1 = window.document.getElementById(window.event.srcElement.ref);?//obj為定義的元素。
???if (obj1 == null) return;
??}
??else
???return;
?}
?if (obj1 == null) return;??//如果obj為空，直接返回。
?if (obj1.tagName != "SELECT") return;?//如果返回的obj不是列表框，直接返回。
?if (typeof(obj1.ref) == "undefined") return;??//沒(méi)有指定目的列表框，直接返回。
?var obj2 = window.document.getElementById(obj1.ref);
?if (obj2 == null) return;?//沒(méi)有找到目的列表框，直接返回
?if (obj2.tagName != "SELECT") return;?//指定的目的不是列表框，返回。
?if (typeof(window.event.srcElement.selectall) != "undefined") {??//如果定義了全部選擇
??selectAll(obj1);
?}
?var check = (typeof(obj2.check) != "undefined") ? true : false;??//判斷是否定義了檢查重復(fù)項(xiàng)
?add(obj1,obj2,check);??//在ojb2中添加obj1中選中的項(xiàng)。
?if (typeof(obj1.deleted) != "undefined") {?//如果定義了刪除原項(xiàng)
??deleted(obj1);??//刪除原項(xiàng)
?}
?if (typeof(obj2.order) != "undefined") {??//指定需要排序
??var order = obj2.order;
??var desc = (typeof(obj2.desc) == "undefined") ? false : true;??//判斷是否定義了倒序
??orderList(obj2,order,desc);??//排序
?}
}
//處理單擊事件
function doClick() {
?if (window.event.srcElement.tagName == "SELECT" || window.event.srcElement.tagName == "OPTION") return;
?doEvent();
}
//處理雙擊事件
function doDblClick() {
?doEvent();
}
</script>
總結(jié)
以上是生活随笔為你收集整理的怎样得到select所有option里的值的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 如何在多域下安装Exchang服务方法(
- 下一篇： 实用正则表达式(实用篇)