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

本文介绍了一种在动态生成的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>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值