近期开发过程中遇到一个问题,页面上有个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>