當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

怎样得到select所有option里的值

發布時間：2025/3/20 编程问答 15 豆豆

生活随笔收集整理的這篇文章主要介紹了怎样得到select所有option里的值小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

問：
一個頁面里有個復選select 因為option是動態變化的
我想在提交后得到這個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做名字，會有錯的
______________________________________________________________________________________________
答3：
提交后要想得到所有的value
必須在提交之前把所有option置為選中

listLength = Frm.selectOperPoint.options.length;
for(i=0;i<listLength;i++)
{
????? Frm.selectOperPoint.options[i].selected = true;
}
______________________________________________________________________________________________
答4：
這個語句只能在test所在的頁面使用吧，我要在提交后的頁面得到結果
______________________________________________________________________________________________
答5：
我向做的是個就業系統，里面有個就業地點選擇，這個是多選的，是由另外一個多選select
點擊到另外一個復選select的，我里面有個功能就是移除所選中的option
我想提交后能得到所有option的值，因為一個option代表一個用戶愿意工作的地點
______________________________________________________________________________________________
答6：
我看網易的就業系統就是這樣做的，但是我不知道他那個怎么處理提交后的數據，把用戶選中地點存到數據庫，我想他應該是得到了所有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>

</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">刪除移動的項、檢查重復項、按照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">不刪除移動的項、不檢查重復項、按照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">不刪除移動的項、檢查重復項、按照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="選中左邊列表所有的項" οnclick="eee.selectAll()"><br>
???<input type="button" value="取消左邊列表中選中的項" οnclick="eee.selectNone()"><br>
???<input type="button" value="刪除左邊列表中選中的項" ο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

//刪除所有選中的項
<PUBLIC:METHOD NAME="deleted" />
//選中所有項
<PUBLIC:METHOD NAME="selectAll" />
//取消選中的項
<PUBLIC:METHOD NAME="selectNone" />
<PUBLIC:ATTACH EVENT="onclick" ONEVENT="doClick()" />
<PUBLIC:ATTACH EVENT="ondblclick"? ONEVENT="doDblClick()" />
<script language="JScript">
//從列表框中刪除所有選中的項。如果obj為null，則列表框為自身。
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);
??}
?}
}
//選中給定的列表框中所有的項。如果obj為null，則列表框為自身。
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;
?}
}
//取消給定的列表框中所有選中的項。如果obj為null，則列表框為自身。
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列表框中是否已經存在選項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)?//如果一個選項的值和文本與給定的選項相同，則表明存在。
???return true;
?}
?return false;?//如果不存在，則返回false
}
//將列表框obj1中選中的項添加到obj2列表框中，check=true表示不向obj2中的添加重復項
function add(obj1,obj2,check) {
?for (var i=0;i<obj1.options.length;i++) {
??if (obj1.options[i].selected) {??//如果選項被選中，則需要加入到obj2中。
???if (check) {?//需要進行重復性檢查
????if (optionExists(obj2,obj1.options[i])) {?//如果obj2列表框中存在指定的選項，進行下一個循環
?????continue;
????}
???}
???var opt = obj1.options[i].cloneNode(false);
???opt.text = obj1.options[i].text;
???obj2.options.add(opt);??//將選項加入到ojb2中。
??}
?}
}
//排序，obj為列表框對象，order為排序屬性，desc為是否倒序(true-倒序)，采用冒泡算法的改進算法
function orderList(obj,order,desc) {
?var chg = null;
?var flag = true;?//是否進行過交換的標志
?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 交換兩個選項
????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;??//交換過，設為false
???}
??}
??if (flag) break;??//如果一次都沒有交還，則退出
?}
}
//事件處理
function doEvent() {
?var obj1 = null;??//列表框1變量
?if (window.event.srcElement.tagName == "SELECT") {?//如果觸發元素是select
??obj1 = window.event.srcElement;??//obj為觸發的select
?}
?else if (window.event.srcElement.tagName == "OPTION") {?//如果觸發元素是option
??obj1 = window.event.srcElement.parentElement;??//obj為觸發元素的父元素select
?}
?else {
??if (typeof(window.event.srcElement.ref) != "undefined") {?//如果ref被定義過
???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;??//沒有指定目的列表框，直接返回。
?var obj2 = window.document.getElementById(obj1.ref);
?if (obj2 == null) return;?//沒有找到目的列表框，直接返回
?if (obj2.tagName != "SELECT") return;?//指定的目的不是列表框，返回。
?if (typeof(window.event.srcElement.selectall) != "undefined") {??//如果定義了全部選擇
??selectAll(obj1);
?}
?var check = (typeof(obj2.check) != "undefined") ? true : false;??//判斷是否定義了檢查重復項
?add(obj1,obj2,check);??//在ojb2中添加obj1中選中的項。
?if (typeof(obj1.deleted) != "undefined") {?//如果定義了刪除原項
??deleted(obj1);??//刪除原項
?}
?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>

總結

以上是生活随笔為你收集整理的怎样得到select所有option里的值的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：如何在多域下安装Exchang服务方法(
下一篇：实用正则表达式(实用篇)