一、示例

<select id="selectedTest" οnchange="doSomething();">
    <option value="abc">北京</option>
    <option value="edf">上海</option>
    <option>上海</option>
</select>

二、获取option的文本

// 方法一：获取select标签选中的option中的文本。
$(“#selectedTest option:selected”).text() -————> 例如北京、上海

// 方法二：获取select标签选中的option中的文本。
$(“#selectedTest”).find(“option:selected”).text() -————> 例如北京、上海

// 获取select标签选中的option中的文本。
document.querySelector(‘#selectedTest option:checked’).text;

// 将北京这个文本值赋值给option中的文本，通常用于回显数据操作。
document.querySelector(‘#selectedTest’).value = ‘北京’;

三、获取option中value的值

// 方法一：获取select标签选中的option中的value的值。
$(“#selectedTest option:selected”).val() -————> 例如abc、edf

// 方法二：获取select标签选中的option中的value的值。
$(“#selectedTest”).find(“option:selected”).val() -————> 例如abc、edf

-——————————————-有重点,分割线————————————————

option是这样的：

，这个没有value属性，那么自然也就没有value值。

这时候jquery就很纠结：写了段代码让我拿value的值，可是找到的option中根本没有value属性。

这个时候Jquery的操作是：当选中这种格式的时候，你会发现上边四个在控制台打印输出来的值是

一样的。都是option中的文本。所以想要拿到option中的value的值，首先option得有value属性啊！！！

四、代码展示

下面就是HTML代码，看着可以更清楚：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
        <title>你随便写啦</title>
        <script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
        <script type="text/javascript">
            function doSomething(){
                console.info($("#selectedTest option:selected").text());//方法一：获取select标签选中的option中的文本。
                console.info($("#selectedTest").find("option:selected").text());//方法二：获取select标签选中的option中的文本。
                console.info($("#selectedTest option:selected").val());//方法一：获取select标签选中的option中的value的值。
                console.info($("#selectedTest").find("option:selected").val());//方法二：获取select标签选中的option中的value的值。
                document.querySelector('#selectedTest option:checked').text; // 获取select标签选中的option中的文本。
                document.querySelector('#selectedTest').value = '北京'; // 将北京这个文本值赋值给option中的文本，通常用于回显数据操作。
                //------------------------------有重点,分割线--------------------------------
                //option是这样的：<option>上海</option>。即没有value属性的时候，自然也就没有value值。
                //这时候jquery就很纠结：写了段代码让我拿value的值，可是找到的option中根本没有value属性。
                //所以当选中<option>上海</option>这个option的时候，你会发现上边四个在控制台打印输出来的值是一样的。都是option中的文本。
                //想要拿到option中的value的值，首先option得有value属性啊！！！
            }
        </script>
    </head>
    <body>
        <div>
            <select id="selectedTest" οnchange="doSomething();">
                <option value="abc">城市</option>
                <option value="edf">北京</option>
                <option>上海</option>
            </select>
        </div>
    </body>
</html>