获取html下拉菜单selected,原生js获取select下拉框的selected的option项

一. 使用 原生js，获取select标签下属性有selected的option项。

先写一个select标签如下：

TEXT-aaaaa

TEXT-bbbbb

原生js获取select标签这个 对象 :

var selectTest = document.getElementById("selectBox");

然后找到 selected 的option标签的 索引值:

var selectIndex = selectTest.selectedIndex;

这样就可以通过索引来获取选中项的 选中值和文本值:

var selectValue = selectTest.options[selectIndex].value;

var selectText = selectTest.options[selectIndex].text;

完整示例测试demo：

Document

TEXT-aaaaa

TEXT-bbbbb

var selectTest = document.getElementById("selectBox");

var selectIndex = selectTest.selectedIndex;

var selectValue = selectTest.options[selectIndex].value;

var selectText = selectTest.options[selectIndex].text;

var selectArr = [{

"selectTest": JSON.stringify(selectTest),

"selectIndex": selectIndex,

"selectValue": selectValue,

"selectText": selectText

}];

console.table(selectArr);

示例结果如图：

image

二. 当然这样写可能会比较麻烦，jquery为我们提供了更加方便的方法

主要是用到了jquery中的 选择器:

var selectedOption = $("#selectBox option: selected");

然后直接使用val() 和 text() 方法：

console.log(selectedOption.val(), selectedOption.text() );

注意使用jQuery的方法，记得 引入jquery库文件。