1. 程式人生 > >select標簽模擬placeholder屬性與一般操作(最重要的是ios某一項被選中的兼容)

select標簽模擬placeholder屬性與一般操作(最重要的是ios某一項被選中的兼容)

hid rem itext lac 沒有 最重要的 _id get find

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某一項被選中的兼容)