快捷導(dǎo)航

JS中操作<select>標(biāo)簽選的值圖文詳解

更新時(shí)間：2023年10月27日 10:38:09 作者：軟件技術(shù)愛(ài)好者

這篇文章主要給大家介紹了關(guān)于JS中操作<select>標(biāo)簽選值的相關(guān)資料, 在HTML中,<Select>標(biāo)簽下的內(nèi)容,代表下來(lái)列表選項(xiàng),文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

JS中操作<select>標(biāo)簽選的值

<select>標(biāo)簽是一種表單控件，用來(lái)創(chuàng)建下拉列表。在<select> 標(biāo)簽內(nèi)可用 <option> 標(biāo)簽定義下拉列表中的可用選項(xiàng)。下面給出一個(gè)基本下拉列表示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>基本下拉列表a</title>
</head>
<body>
    <select id="selectID" style="width:100px;height:30px">
        <option>項(xiàng)1</option>
        <option>項(xiàng)2</option>
        <option>項(xiàng)3</option>
        <option>項(xiàng)4</option>
    </select>       
</body>
</html>

保存文件名：簡(jiǎn)單下拉列表示例a.html，用瀏覽器打開(kāi)效果：

JS操作下拉列表中的選項(xiàng)

<select>標(biāo)簽下的內(nèi)容，可以通過(guò)JS的操作，獲取其對(duì)象，獲取被選項(xiàng)的索引（index）、值（value）、內(nèi)容（text）

獲取select對(duì)象：

var myselect=document.getElementById("selectID");

其中，selectID標(biāo)識(shí)<select>標(biāo)簽id屬性值

2.獲取選中項(xiàng)的索引：

var index =myselect.selectedIndex; //selectedIndex代表的是你所選中項(xiàng)的 index

3.獲取選中項(xiàng)option的value：

myselect.options[index].value;

上句可去掉options[index].寫(xiě)為myselect.value

4.獲取選中項(xiàng)option的text：

myselect.options[index].text;

5. 獲取選中項(xiàng)的其他值，如有：

<select id="select">
    <option value="A" url="http://www.baidu.com">第一個(gè)option</option>
    <option value="B" url="http://www.qq.com">第二個(gè)option</option>
</select>

想獲取的url：

myselect.options[index].getAttribute('url');

提示：上面是分步寫(xiě)法，現(xiàn)在看看綜合寫(xiě)法

對(duì)于上面3的綜合寫(xiě)法是：

document.getElementById("selectID").value;

或

document.getElementById("selectID").options[document.getElementById("selectID").selectedIndex].value;

對(duì)于上面4的綜合寫(xiě)法是：

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，用瀏覽器打開(kāi)效果：

用JS將數(shù)組中的元素信息添加到下拉列表

先介紹將數(shù)組的元素信息添加到下拉列表用到的方法和屬性

select標(biāo)簽對(duì)象的方法

add() 向下拉列表添加一個(gè)選項(xiàng)。

語(yǔ)法：selectobject.add(option,before)

remove() 從下拉列表中刪除一個(gè)選項(xiàng).

語(yǔ)法: selectobject.remove(index)

Optiont標(biāo)簽對(duì)象的屬性

defaultSelected 返回 selected屬性的默認(rèn)值。

index 返回下拉列表中某個(gè)選項(xiàng)的索引位置。

Selected 設(shè)置或返回 selected 屬性的值。

text 設(shè)置或返回某個(gè)選項(xiàng)的純文本值。

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ù)項(xiàng)" onclick="addopt()">
    </form>
<script>
    var arr=new Array('項(xiàng)1','項(xiàng)2','項(xiàng)3','項(xiàng)4','項(xiàng)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ù)項(xiàng)添加到下拉列表.html，用瀏覽器打開(kāi)效果：