select标签模拟placeholder属性与一般操作(最重要的是ios某一项被选中的兼容)
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了select标签模拟placeholder属性与一般操作(最重要的是ios某一项被选中的兼容)相关的知识,希望对你有一定的参考价值。
1.为了统一样式,常常要模拟placeholder
<select>
<option disabled selected hidden>请选择</option>
<option>what</option>
<option>the</option>
<option>hell</option>
</select>
2.select选中的值和某个值要被选中(ios兼容)
<select style="font-size: 60px">
<option>2</option>
<option>5年</option>
<option>10年</option>
<option>20年</option>
</select>
<select style="font-size: 50px" id="select_id ">
<option value="1">年交</option>
<option value="2">趸交</option>
</select>
a 取得选中值:
获取select 选中的 text :
$("selecr").eq(0).find("option:selected").text();
获取select选中的 value:
$("selecr").eq(0).val();
获取select选中的索引:
$("selecr")[0].selectedindex;
b 设置select
var iText= $("selecr").eq(0).find("option:selected").text();
$(‘select‘).eq(1).find("option[value = ‘"+iText+"‘]").prop("selected","selected");
之前用的是attr,但是发现ios怎么都不行,没想到只要把attr换成prop就没有兼容问题了,ios真是磨人的小妖精啊!
还有$(‘select‘).eq(1).val(iText);
$(‘select‘).eq(1).get(0).value =iText;
下面这俩种没有做兼容测试,按道理是没有问题的因为是修改之前的代码,不敢大改
c 清空 select:
$(‘select‘).eq(1).empty();
d 增加或减少select的opacity项
$‘(#select_id‘).append("<option value=‘value‘>text</option>"); //添加一项option
$(#select_id‘).prepend("<option value=‘0‘>请选择</option>"); //在前面插入一项option
$("#select_id option:last").remove(); //删除索引值最大的option
$("#select_id option[index=‘0‘]").remove();//删除索引值为0的option
$("#select_id option[value=‘3‘]").remove(); //删除值为3的option
$("#select_id option[text=‘4‘]").remove(); //删除text值为4的option
以上是关于select标签模拟placeholder属性与一般操作(最重要的是ios某一项被选中的兼容)的主要内容,如果未能解决你的问题,请参考以下文章
让div支持placeholder属性/模拟输入框的placeholder属性
HTML里input标签里的placeholder、for属性的作用?