網站首頁 健康小知識 母嬰教育 起名 運動知識 職場理財 情感生活 綠色生活 遊戲數碼 美容 特色美食 愛好

使用Jquery如何操作下拉框控件?

欄目: IT技術 / 發佈於: / 人氣:2.29W

下拉框選擇控件,在網頁開發中,是經常使用到的一個控件。所以會對它有很頻繁的操作,藉助Jquery,我們可以很方便地對它進行操作控制。
下面一起來看些例子。

操作方法

(01)先看下我們的例子HTML代碼,很簡單,就是一個標準的Select下拉框選擇控件,加幾個按鈕。如圖

使用Jquery如何操作下拉框控件?

(02)運行後,界面如圖

使用Jquery如何操作下拉框控件? 第2張

(03)我們加上代碼,實現第一個按鈕的邏輯。用代碼去選中下拉框的值,用Jquery的 val()方法就行,$("#sel")('2'); // 2就是下拉框對應項的value值。

使用Jquery如何操作下拉框控件? 第3張

(04)刷新頁面後,點擊第一個按鈕,可以看到下拉框的第二項被選中了。

使用Jquery如何操作下拉框控件? 第4張

(05)能設置選中項,當然也能獲取是哪項選中了,這裏加上第二個按鈕的邏輯,獲取選中項的值,我們也是用 val()方法,不過這次不用傳參數,(有參數時,是設置值)$("#sel")();

使用Jquery如何操作下拉框控件? 第5張

(06)重新刷新頁面後,點擊第二個按鈕,可以看到下拉框選中項的value值在彈出框裏顯示出來了。

使用Jquery如何操作下拉框控件? 第6張

(07)第三個按鈕的邏輯,添加一個下拉框的選項,用append方法,直接加上option項就行,$("#sel")nd("<option value='4'>搜狗地圖</option>");

使用Jquery如何操作下拉框控件? 第7張

(08)刷新頁面後,點擊對應按鈕,新加的選項正常加上了:)

使用Jquery如何操作下拉框控件? 第8張

(09)最後一個按鈕的邏輯了,刪除一個下拉選項,用的是remove方法,我們刪除value=2的第二項,首先用選擇器選擇到 value為 2的項,然後用remove方法,就可以了。$("#sel option[value='2']")ve();

使用Jquery如何操作下拉框控件? 第9張

(10)刷新頁面,點擊第四個按鈕,第二項被刪除了。

使用Jquery如何操作下拉框控件? 第10張