原生js獲取select標籤選中值

阿新 • • 發佈：2018-12-23

this.selectedIndex; // 選中的索引
this.options[_index].text; // 選中的文字
this.options[_index].value; // 選中的值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>js獲取select選中值</title>
        <style type="text/css">
            body{
                padding-left 
: 100px;
            }
            div{
                margin: 10px 0;
            }
        </style>
    </head>
    <body>
        <select id="one">
            <option>11111</option>
            <option>22222</option>
            <option>33333</option 
>
        </select>
        <div class="one"></div>

        <select id="two" multiple="true">
            <option>11111</option>
            <option>22222</option>
            <option>33333</option>
        </select>
        <div class 
="two"></div>

        <script>
            /**
             * 原生JS獲取select選中值
             **/
            var one = document.getElementById('one');
            one.addEventListener('change', function() {
                var _index = this.selectedIndex; // 選中索引,如果是多選，則永遠獲取第一個
                var _text = this.options[_index].text; // 選中文字
                var _value = this.options[_index].value; // 選中值

                document.getElementsByClassName('one')[0].innerText= "選中的索引是："+_index
                    + "    選中的文字是："+ _text
                    + "    選中的值是：" + _value;
            })

            /**
             * 原生JS獲取多選select選中值
             **/
            var two = removeWhitespace(document.getElementById('two'));
            two.addEventListener('change', function() {
                var _two = document.getElementsByClassName('two')[0];
                var str=""; // 儲存選中值
                var fid = two.childNodes; // 得到所有的option
                for(var i = 0; i < fid.length; i++) {
                    if(fid[i].selected==true){ // 判斷
                        str += "選中索引："+ fid[i].index + ",選中文字："+fid[i].text + "選中值：" + fid[i].value +"，";

                    }

                }
                _two.innerText = str;
            })

            // 清除節點內空格
            function removeWhitespace(xml){
                var loopIndex;  

                for (loopIndex = 0; loopIndex < xml.childNodes.length; loopIndex++){  
                    var currentNode = xml.childNodes[loopIndex];  
                    if (currentNode.nodeType == 1){  
                        removeWhitespace(currentNode);  
                    }  

                    if (((/^\s+$/.test(currentNode.nodeValue))) &&(currentNode.nodeType == 3)){  
                        xml.removeChild(xml.childNodes[loopIndex--]);  
                    }  
                }
                return xml;
            }
        </script>
    </body>

</html>

原生js獲取select標籤選中值

this.selectedIndex; // 選中的索引 this.options[_index].text; // 選中的文字 this.options[_index].value; // 選中的值

js獲取select標籤選中的值

var obj = document.getElementByIdx_x(”testSelect”); //定位id var index = obj.selectedIndex; // 選中索引 var text = obj.options[index].text

jquery及原生js獲取select下拉框選中的值示例

有一id=test的下拉框，怎麼拿到選中的那個值呢？本文將採用javascript原生的方法及jquery方法（前提是已經載入了jquery庫）來簡單實現下現在有一id=test的下拉框，怎麼拿到選中的那個值呢？分別使用javascript原生的方法和jquery方法,程式碼

JS獲取select標籤中option的個數

<select id="status" onmousedown="if (this.options.length> 3) this.size=3;" onchange="this.size=0" > <option value="0">待

js/jQuery select標籤獲取值/option 選中事件

前言 select標籤是常規下拉選單的第一選擇常用的select標籤形式 <select id="test" name=""> <option va

js獲取獲取select:option選中的多個值

sele lec sel div alert clas option spa log  <select id = ‘tagName‘></select> var tag = $("#ta

JS獲取select下拉框選中的value或者其name

text single nbsp -s 舉例 sta c-s jquer hid 舉例： <select class="js-example-basic-single js-states" style="width: 300px" name="hid" id="hi

Js操作Select大全(取值、設置選中等等)

自己 class 簡潔 chan break == 中括號 edit end jquery操作select(取值，設置選中）每一次操作select的時候，總是要出來翻一下資料，不如自己總結一下，以後就翻這裏了。比如<select class="selector"&

原生js獲取元素樣式值

應該 eight current document 疑惑行內樣式 lin script 輸出在學習js初期，就一直有一個疑問，獲取元素樣式的值，不是直接使用obj.style.left之類的就可以得到了嗎？可是使用這樣的方式，有的時候能夠獲取得到，有的時候又不能獲取，

獲取select被選中的option的值

選中項 nbsp 技術技術分享中項 cte ted com class <select id="select"> <option>綏江</option> <option>西江</option>

js獲取select下拉框中的值

現在有一id為userType的下拉框，怎麼獲取選中的值： 1 使用者型別: 2 <select name="type" id="userType"> 3 <option value="0">請選擇</option> 4 <option v

js獲取select選中的內容

### 獲取select選中的內容 js獲取select標籤選中的值 var obj = document.getElementById("selectId");//獲取select物件 var index = obj.selectedIndex; // 選中索引 var text = obj.

js 獲取select的值 / js動態給select賦值 jQuery獲取

jQuery獲取Select選擇的Text和Value:語法解釋：1. $("#select_id").change(function(){//code...}); //為Select新增事件，當選擇其中一項時觸發2. var checkText=$("#select_id"

原生js獲取 url 鍵值對

GetUrlParam(paraName) { 　　　　var url = window.location.toString(); 　　　　var arrObj = url.split("?"); 　　　　if

Js操作Select大全(取值、設定選中等等)

jquery操作select(取值，設定選中）每一次操作select的時候，總是要出來翻一下資料，不如自己總結一下，以後就翻這裡了。比如<select class="selector"></select>

js獲取li標籤下的p標籤或者a標籤的值

例如:(點選編輯按鈕,獲取admin 的值) <li class="role_oli"> <p class="user_enable">admin</p>

關於JS獲取select的值(value和text)

原文地址:http://blog.sina.com.cn/s/blog_66af0af20100io6q.html <select id="s1" name="s1"> <option selected="selected" value="1">選項一&

JS獲取select選中的value和內容

不說廢話，直接上程式碼 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &l

jQuery獲取select中選中的option的值和自定義屬性的值

使用jQuery獲取獲取select下拉框中option的值： //通過繫結change事件，當下拉框內容發生變化時事件被啟動 $("#wlms").bind("change",function(

JS獲取input標籤的text值、JS獲取下拉框內容、input控制只能輸入數字等問題彙總

1、在js中如何獲取input標籤的text值 var cgsl = document.getElementsByName("cgsl")[0].value; jsp原始碼為： <span> </span><tr><spa

原生js獲取select標籤選中值

相關推薦