js&jquery 获取select下拉框的值、文本内容、自定义属性

最新推荐文章于 2023-12-08 15:32:39 发布

转载最新推荐文章于 2023-12-08 15:32:39 发布 · 143 阅读

文章标签：

#javascript #ViewUI

本文介绍如何使用JavaScript和jQuery来获取HTML中Select元素的值、文本内容及自定义属性。通过具体示例展示了两种不同方法的具体实现，并对比了它们的使用方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js&jquery 获取select下拉框的值、文本内容、自定义属性

CreationTime--2018年7月2日09点22分

Author:Marydon

html

<select id="test">
    <option value="1">Marydon</option>
    <option value="2" tip="welcome" selected>http://wwww.cnblogs.com/Marydon20170307</option>
</select>

1.jquery

window.onload = function(){
    // 1.取值
    $('#test option:selected').val();
    // 2.取文本内容
    $('#test option:selected').text();
    // 3.获取自定义属性tip
    $('#test option:selected').attr('tip');
}

2.javascript

window.onload = function(){
    // 获取选中项的索引
    var selectedIndex = document.querySelector('#test').selectedIndex;
    // 1.取值
    document.getElementById('test').value;// 2
    // 2.取文本内容
    document.getElementById('test').options[selectedIndex].innerText;// http://wwww.cnblogs.com/Marydon20170307
    // 3.获取自定义属性tip
    document.getElementById('test').options[selectedIndex].getAttribute('tip');// welcome
}