如何找到全部 HTML select 標籤的選中項

時間 2019-11-09

標籤如何找到全部 html select 標籤中項欄目 HTML 简体版

原文原文鏈接

話很少說，咱就直奔主題吧，直接展現代碼：javascript

<body>
    <select name="n_select" class="c_select" id="i_select1">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3" selected>3</option>
        <option value="4">4</option>
        <option value="5">5</option>
    </select>
    <select name="n_select" class="c_select" id="i_select2">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4" selected >4</option>
        <option value="5">5</option>
    </select>
</body>

如下就是js的部分:java

<script type="text/javascript">

    JQ:
    獲取全部選中的項（獲取全部的select的選中項需遍歷載具體取相應的值）
    $('[name=n_select] :selected');
    $('.c_select option:selected');
    $('.c_select').find('option:selected');
    
    獲取select 選中的值（只返回第一個select ）
    $('[name=n_select] :selected').text();                     // 獲取select選中項的文本 
    $('[name=n_select] :selected').val();                      // 獲取select選中項的值 
    
    $('.c_select option:selected').text();                     // 獲取select選中項的文本
    $('.c_select option:selected').val();                      // 獲取select選中項的值
    
    $('.c_select').find('option:selected').text();             // 獲取select選中項的文本
    $('.c_select').find('option:selected').val();              // 獲取select選中項的值
    
    
    JS:
    // 兼容至IE9+
    var tag_select = document.getElementsByClassName('c_select');    // 獲取全部select 
    // 至少兼容值IE7,IE6沒測試
    var tag_select = document.getElementsByTagName('select');        // 獲取全部select
    // 至少兼容值IE7,IE6沒測試 
    var tag_select = document.getElementsByName('n_select');         // 獲取全部select
    
    // 至少兼容值IE7,IE6沒測試 （下面索引1只是隨便舉例，可遍歷 tag_select 獲取全部的）
    var tag_sValue = tag_select[1].value;                            // 獲取某個select選中項的值
    var tag_sIndex = tag_select[1].selectedIndex;                    // 獲取某個select選中項的索引
    var tag_oValue = tag_select[1].options[tag_sIndex].value;        // 獲取某個select選中項的值
    var tag_oTexts = tag_select[1].options[tag_sIndex].text;         // 獲取某個select選中項的文本 .text 或者 .innerText 均可以獲取
    
</script>

PS：我在寫代碼 js 部分的時候 tag_select[1].options[tag_sIndex] 中的 options 總是忽略 s 寫成 option，致使獲取不到值。和我同樣粗枝大葉的童鞋須要注意下，不要再犯這種低級錯誤啦 ♪(^∇^*)！測試

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。