JS中操作<select>標簽選的值圖文詳解
JS中操作<select>標簽選的值
<select>標簽是一種表單控件，用來創(chuàng)建下拉列表。在<select> 標簽內(nèi)可用 <option> 標簽定義下拉列表中的可用選項。下面給出一個基本下拉列表示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>基本下拉列表a</title>
</head>
<body>
<select id="selectID" style="width:100px;height:30px">
<option>項1</option>
<option>項2</option>
<option>項3</option>
<option>項4</option>
</select>
</body>
</html>保存文件名：簡單下拉列表示例a.html，用瀏覽器打開效果：
JS操作下拉列表中的選項
<select>標簽下的內(nèi)容，可以通過JS的操作，獲取其對象，獲取被選項的索引（index）、值（value）、內(nèi)容（text）
獲取select對象：
var myselect=document.getElementById("selectID");其中，selectID標識<select>標簽id屬性值
2.獲取選中項的索引：
var index =myselect.selectedIndex; //selectedIndex代表的是你所選中項的 index
3.獲取選中項option的value：
myselect.options[index].value;
上句可去掉options[index].寫為myselect.value
4.獲取選中項option的text：
myselect.options[index].text;
5. 獲取選中項的其他值，如有：
<select id="select">
<option value="A" url="http://www.baidu.com">第一個option</option>
<option value="B" url="http://www.qq.com">第二個option</option>
</select>想獲取的url：
myselect.options[index].getAttribute('url');提示：上面是分步寫法，現(xiàn)在看看綜合寫法
對于上面3的綜合寫法是：
document.getElementById("selectID").value;或
document.getElementById("selectID").options[document.getElementById("selectID").selectedIndex].value;對于上面4的綜合寫法是：
document.getElementById("selectID").options[document.getElementById("selectID").selectedIndex].text下面給出從下拉列表中選擇圖片顯示的示例源碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示</title>
<style>
div{
margin:20px;
text-align:center;
}
</style>
<script>
function show() {
document.getElementById("imgID").src = document.getElementById("selectID").value;
}
</script>
</head>
<body>
<div >
雪景
<select id="selectID" onchange="show()" style="width:100px;height:30px">
<option value="./雪1.png">雪1</option>
<option value="./雪2.png">雪2</option>
<option value="./雪3.png">雪3</option>
</select>
<br>
<img id="imgID" src="雪1.png" />
</div>
</body>
</html>保存文件名：從下拉列表中選擇圖片顯示1b.html，用瀏覽器打開效果：
用JS將數(shù)組中的元素信息添加到下拉列表
先介紹將數(shù)組的元素信息添加到下拉列表用到的方法和屬性
select標簽對象的方法
add() 向下拉列表添加一個選項。
語法：selectobject.add(option,before)
remove() 從下拉列表中刪除一個選項.
語法: selectobject.remove(index)
Optiont標簽對象的屬性
defaultSelected 返回 selected屬性的默認值。
index 返回下拉列表中某個選項的索引位置。
Selected 設置或返回 selected 屬性的值。
text 設置或返回某個選項的純文本值。
JS將數(shù)組的的元素信息添加到下拉列表，示例源碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>示例</title>
</head>
<body>
<form name="form1" action="">
<select name="sel" style="width:100px;height:30px">
</select><br>
<input type="button" value="加載數(shù)組的數(shù)據(jù)項" onclick="addopt()">
</form>
<script>
var arr=new Array('項1','項2','項3','項4','項5')
var counts=arr.length;
function addopt(){
for(var i=0;i<counts;i++){
// document.form1.sel.options[i]=new Option (arr[i],i)
var opt=document.createElement('option')
opt.text=arr[i]
opt.value=i;
document.form1.sel.add(opt,undefined)
}
}
</script>
</body>
</html>保存文件名：數(shù)組的數(shù)據(jù)項添加到下拉列表.html，用瀏覽器打開效果：
總結
到此這篇關于JS中操作<select>標簽選的值的文章就介紹到這了,更多相關JS操作<select>標簽選值內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
JavaScript和其他語言一樣,都擁有捕獲異常的機制,下面這篇文章主要給大家介紹了關于JS中異常拋出和處理的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
JS Common 2 之比較常用到的函數(shù)...2007-03-03
微信小程序用戶授權彈窗 拒絕時引導用戶重新授權實現(xiàn)
我們在開發(fā)小程序時，如果想獲取用戶信息，就需要獲取用的授權，如果用戶誤點了拒絕授權，我們怎么樣去正確的引導用戶重新授權呢。今天就來給大家講講如果正確的引導用戶授權,需要的朋友可以參考下2019-07-07
Nuxt.js 就是一個Vue的服務端渲染框架,和React的服務端渲染框架類似。這篇文章主要介紹了Nuxt.js實現(xiàn)校驗訪問瀏覽器類型的中間件,需要的朋友可以參考下2018-08-08
簽名板在網(wǎng)頁應用中扮演著重要角色,它們能夠記錄用戶的手寫簽名或者繪圖,下面就跟隨小編一起來學習一下如何使用JavaScript實現(xiàn)簽名板功能2024-10-10
這篇文章主要介紹了js實現(xiàn)模擬銀行卡賬號輸入顯示效果,涉及JavaScript正則匹配與字符串操作的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
本文給大家?guī)砹薺son解析方法小結的知識，非常不錯，具有參考借鑒價值，感興趣的朋友一起學習吧2016-06-06
這篇文章主要為大家詳細介紹了js結合html制作簡單驗證碼的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
通過函數(shù)作用域和塊級作用域看javascript的作用域鏈
這篇文章給大家分享了通過函數(shù)作用域和塊級作用域看javascript的作用域鏈的相關知識點內(nèi)容，有興趣的朋友參考學習下。2018-08-08
layer.alert回調函數(shù)執(zhí)行關閉彈窗的實例
今天小編就為大家分享一篇layer.alert回調函數(shù)執(zhí)行關閉彈窗的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09