select标签，根据标签的文本值设置选中状态不生效的解决

最新推荐文章于 2022-04-13 18:26:43 发布

原创最新推荐文章于 2022-04-13 18:26:43 发布 · 2.9k 阅读

4 ·

CC 4.0 BY-SA版权

javascript笔记专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种在动态生成的select下拉框中，通过文本而非value值进行选项匹配的方法。针对API返回结果不包含兴趣班ID的问题，提出了解决方案，即在<option>标签中增加text属性，实现按文本值进行匹配。

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

近期开发过程中遇到一个问题，页面上有个select下拉框，选项列表的文本和value值是根据API返回结果动态生成的。比如，兴趣班有“篮球”和“足球”，小明个人信息API只返回了兴趣班名称“篮球”，没有返回兴趣班ID，所以常规方法行不通了。

<select id="selector">
    <option value="basketball"> 篮球 </option>
    <option value="football"> 足球 </option>
</select>

//根据value值设置选中
$("#selector").find("option[value='basketball']").prop("selected",true);
//根据文本设置选中
$("#selector").find("option[text='篮球']").prop("selected",true);
//获取选中项的value值
$("#selector").children("option:selected").val();
//获取选中项的文本
$("#selector").children("option:selected").text();

然后发现根据文本设置选中无论如何都不生效。

最终。。。

不生效是因为对于<select>标签来说，并不存在这样一个text属性，如果需要按文本值进行匹配，需要先定义。正确的写法如下：

<select id="selector">
    <option value="basketball" text="篮球"> 篮球 </option>
    <option value="football" text="足球"> 足球 </option>
</select>