? ? ? ? 實(shí)際項目中經(jīng)常會用到select-option元素來完成相關(guān)信息的下拉選項實(shí)現(xiàn)憨奸。而涉及到與服務(wù)器端數(shù)據(jù)庫交互時排宰，更是操作項增多那婉。如取值详炬、設(shè)定特殊值、改變選值以及新建在跳、刪除標(biāo)簽元素等枪萄。那么現(xiàn)在我就綜合最近一段時間實(shí)際項目中涉及到的相關(guān)功能和操作進(jìn)行一個小小的整理，希望能幫助到有需要的同學(xué)猫妙。
1瓷翻、jQuery設(shè)置下拉框select 默認(rèn)選中第一個option：
$("#select-id option:first").prop("selected", 'selected');
2、隱藏select的下拉黑色三角：
/*隱藏select的下拉黑三角*/
#select-id{appearance:none;-webkit-appearance:none;-moz-appearance:none;}
這里說一下appearance屬性割坠。
? ? ? ? appearance 屬性允許您使元素看上去像標(biāo)準(zhǔn)的用戶界面元素逻悠。用法如下：
默認(rèn)值: normal;
繼承性：no;
版本：CSS3;
js語法：object.style.appearance="button"；
其對應(yīng)的值有：
appearance: normal|icon|window|button|menu|field;
對應(yīng)的含義分別為：
normal 將元素呈現(xiàn)為常規(guī)元素韭脊。
icon 將元素呈現(xiàn)為圖標(biāo)（小圖片）童谒。
window 將元素呈現(xiàn)為視口。
button 將元素呈現(xiàn)為按鈕沪羔。
menu 將元素呈現(xiàn)為一套供用戶選擇的選項。
field 將元素呈現(xiàn)為輸入字段蔫饰。
3琅豆、設(shè)置select選項居右顯示：
? ? ? ? 相信做過此功能的小伙伴們都知道，text-align對select不起作用篓吁。那么該如何設(shè)置呢茫因？
使用direction屬性可以有效設(shè)置。
#select-id{direction:rtl;}/*使option選項文字居右顯示*/
#select-id{direction:ltl;}/*使option選項位置居左顯示*/
4杖剪、隱藏select的邊框和外部輪廓(外邊框:在聚焦或者被點(diǎn)擊時出現(xiàn)的邊框)：
/*隱藏select的邊框*/
#select-id{border: none;}
/*隱藏select的外邊框*/
#select-id{outline: none;}
5冻押、在設(shè)置列表時，一般select選項文字顏色要弱于提示文字盛嘿，所以可將select的文字置為灰色或其他淺于黑色的顏色洛巢。(這不屬于技術(shù)點(diǎn)，但是在項目中遇到過此類明確的需求次兆，所以在此記錄一下稿茉。)
#select-id{color:grey;}
? ? ? ? 既然已經(jīng)說到文字顏色問題了，那么接著再說一下文字大小和對齊問題吧芥炭。
那么此時可根據(jù)自己的樣式設(shè)置情況將select相對移動一些砰琢。
#select-id{position: relative;top: 3px;}
? ? ? ? 源代碼如下：
CSS部分
/*ul*/
ul{list-style: none;margin: 100px;}
/*li*/
.wrap{width: 300px;padding: 10px 2px;border-bottom: 1px solid grey;}
/*右側(cè)下拉選項*/
.wrap-select{float: right;width: 200px;}
/*隱藏select的下拉黑三角*/
.hide-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;}
/*隱藏select的邊框陪汽、外邊框训唱、使option選項文字居右顯示、盡量水平對齊*/
.wrap-select{border: none;outline: none;direction:rtl;color: grey;position: relative;top: 3px;}
HTML部分
<ul>
<li class="wrap">
<span class="wrap-text">最喜歡的城市</span>
<select name="" id="targetSelect" class="wrap-select hide-select">
<option value="0">請選擇</option>
<option value="1">石家莊</option>
<option value="2">北京</option>
<option value="3">西安</option>
<option value="4">廊坊</option>
<option value="5">天津</option>
</select>
</li>
<li class="wrap">
<span class="wrap-text">最喜歡的季節(jié)</span>
<select name="" id="targetSelect" class="wrap-select hide-select">
<option value="0">請選擇</option>
<option value="1">石家莊</option>
<option value="2">北京</option>
<option value="3">西安</option>
<option value="4">廊坊</option>
<option value="5">天津</option>
</select>
</li>
<li class="wrap">
<span class="wrap-text">最喜歡的食物</span>
<select name="" id="targetSelect" class="wrap-select hide-select">
<option value="0">請選擇</option>
<option value="1">石家莊</option>
<option value="2">北京</option>
<option value="3">西安</option>
<option value="4">廊坊</option>
<option value="5">天津</option>
</select>
</li>
</ul>
? ? ? ?相信大家對動態(tài)創(chuàng)建或者刪除select元素已經(jīng)很熟悉了挚冤，在此就不再贅述况增。重點(diǎn)記一下如何對其選中的值進(jìn)行操作。
6训挡、設(shè)置value為1的option項被選中：
$("#targetSelect").val("1");
7澳骤、設(shè)置某固定的文本對應(yīng)的option項被選中 ：
$("#targetSelect").find("option[text='文本內(nèi)容']").attr("selected",true);
8、獲取被選中option對應(yīng)的value值：
$("#targetSelect").val();
9澜薄、獲取當(dāng)前選中項的text文本(即option的內(nèi)容)：
$("#targetSelect").find("option:selected").text();
10为肮、獲取select當(dāng)前選中項的option的Index.(注意：Index是從0開始)
$("#targetSelect")[0].selectedIndex //不加[0]獲取不到
? ? ? ?以上方法親測有效。暫時整理這些肤京，另外select的級聯(lián)也很有用颊艳，之后會跟進(jìn)更新。
? ? ? ?以上忘分。
