快捷導(dǎo)航

jQuery實(shí)現(xiàn)Select下拉列表進(jìn)行狀態(tài)選擇功能

更新時(shí)間：2017年03月30日 11:09:48 作者：老妖仔

本文主要介紹了jQuery實(shí)現(xiàn)Select下拉列表進(jìn)行狀態(tài)選擇功能的代碼。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧

場(chǎng)景：

eg:在管理一篇博文時(shí)，因博文的管理有一列叫：狀態(tài)的列，該列有諸多狀態(tài)，如：正常，待審核，刪除等... 此時(shí)，若使用Select下拉列表進(jìn)行狀態(tài)選擇，并在選中具體項(xiàng)值后，通過(guò)Ajax異步提交，在效果及體驗(yàn)上就能得到更大化的體驗(yàn)。

下拉列表例子如下：

<select id="status">
 <option value="0" >待審核</option>
 <option value="1" >未通過(guò)審核</option>
 <option value="2" >制作中</option>
 <option value="3">制作完成</option>
 <option value="4" >發(fā)布</option>
 <option value="5">暫停</option>
 <option value="6">刪除</option>
</select>

錯(cuò)誤示范：

 $("select#status").click(function(){
 console.log($(this).val());
 });

若通過(guò)click事件執(zhí)行，則在點(diǎn)擊下拉列表的首次便會(huì)觸發(fā)一次Ajax請(qǐng)求，這樣并不符合邏輯，故不能使用click事件作為下拉列表選中具體值的做法。

正確示范：

 $("select#status").change(function(){
 console.log($(this).val());
 });

W3SCHOOL 對(duì)change事件的詮釋如下:

定義和用法

當(dāng)元素的值發(fā)生改變時(shí)，會(huì)發(fā)生 change 事件。

該事件僅適用于文本域（text field），以及 textarea 和 select 元素。

change() 函數(shù)觸發(fā) change 事件，或規(guī)定當(dāng)發(fā)生 change 事件時(shí)運(yùn)行的函數(shù)。

注釋：當(dāng)用于 select 元素時(shí)，change 事件會(huì)在選擇某個(gè)選項(xiàng)時(shí)發(fā)生。當(dāng)用于 text field 或 text area 時(shí)，該事件會(huì)在元素失去焦點(diǎn)時(shí)發(fā)生。

通過(guò)以上，能清楚明白，當(dāng)對(duì)于Select下拉列表時(shí)，應(yīng)該使用Change事件。

補(bǔ)充：

因?yàn)轫?yè)面翻頁(yè)也是使用Ajax技術(shù)進(jìn)行異步處理，當(dāng)翻頁(yè)后，原寫法將失效，此時(shí)應(yīng)該使用如下代碼進(jìn)行執(zhí)行：

 $(document).on("change",'select#status',function(){
 console.log($(this).val());
 });

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

jQuery實(shí)現(xiàn)Select下拉列表進(jìn)行狀態(tài)選擇功能

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具