JavaScript怎样获取select标签当前选择的值呢？

Posted 2023-04-02

怎么获取select标签当前选择的选项呢 比如 <select> <option value ="volvo">Volvo</option> <option value ="saab">Saab</option> <option value="opel">Opel</option>

如果select标签是有id属性的，如
<select id=xx>...
则用下述方法获取当前选项的值：
var v = xx.value;
或
var v = document.getElementById("xx").value; //此方法兼容性好

如果select标签是有name属性的，如
<form name=form1>
<select name=xx>...
则用下述方法获取当前选项的值：
var v = form1.xx.value;
或
var v = document.getElementsByName("xx")[0].value;
如果同一页面含有多个name属性相同的标签，则上述[0]中的数字要改为相应的物理顺序号（从0起算）

如果select标签不含有任何可供定位的属性，如
<select>...
则用下述方法获取当前选项的值：
var v = document.getElementsByTagName("select")[0].value;
如果同一页面含有多个select标签，则上述[0]中的数字要改为相应的物理顺序号（从0起算） 参考技术A 对于以下select标签，获取当前选择的值得方式如下：

<select id="test" name="">
<option value="1">text1</option>
<option value="2">text2</option>
</select>
code:
一：javascript原生的方法
1:拿到select对象： var myselect=document.getElementById("test");
2：拿到选中项的索引：var index=myselect.selectedIndex ; // selectedIndex代表的是你所选中项的index
3:拿到选中项options的value： myselect.options[index].value;
4:拿到选中项options的text： myselect.options[index].text;

获取多选下拉框（select标签设置multiple属性）的值

原文链接：https://blog.csdn.net/qq846294282/article/details/82427002   （侵删）

<select multiple>不能直接获取value，需要借助该元素的options属性。如下：

<select id="select" multiple>
    <option value="1">1111</option>
    <option value="2">2222</option>
    <option value="3">3333</option>
</select >
<script>
    // 获取select元素的options属性
    const options = document.querySelector(‘#select‘).options
    const selectedValueArr = []
    for (let i = 0; i < options.length; i++) {
        // 如果该option被选中，则将它的value存入数组
        if (options[i].selected) {
            selectedValueArr.push(options[i].value)
        }
    }
    // 如果后端需要字符串形式，比如逗号分隔
    const selectedValueStr = selectedValueArr.join(‘,‘)
    // Ajax code here
    // ...
</script>