HTML之 select 标签如何获取其选中的 option 子标签

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/chenbetter1996/article/details/84555202

<select>、<option>标签格式

<select class="dropdown-menu">
    <option value="title" role="presentation">书名</option>
    <option value="type" role="presentation">类别</option>
    <option value="range" role="presentation">价格范围</option>
    <option value="asc" role="presentation">价格升序</option>
    <option value="desc" role="presentation">价格降序</option>
</select>

获取方法

先获取select标签：var selectElement = $(".dropdown-menu")[0];

控制台的错误是没有开服务运行的问题，不碍事。

1. 获取选中的<option>的索引值（序号，从0开始）

selectElement.selectedIndex    // selectElement是刚刚获取的select标签

2. 获取<select>下某个<option>的text（innerHTML）和value

/* 不是获取选择的，是指定某个 */

// 获取value
selectElement.option[i].value;

// 获取text(innerHTML), 两个一样的
selectElement.option[i].text;
selectElement.option[i].innerHTML;

3. 获取选中的<option>的值（value、text）

结合1、2即可。

selectElement.option[selectElement.selectedIndex].value;
selectElement.option[selectElement.selectedIndex].text;