jQuery動(dòng)態(tài)添加刪除select項(xiàng)(實(shí)現(xiàn)代碼)

更新時(shí)間：2013年09月03日 08:46:22 作者：

以下是對(duì)jQuery動(dòng)態(tài)添加刪除select項(xiàng)的實(shí)現(xiàn)代碼進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下

// 添加
function col_add() {
 var selObj = $("#mySelect");
 var value="value";
 var text="text";
 selObj.append("<option value='"+value+"'>"+text+"</option>");
}
// 刪除
function col_delete() {
 var selOpt = $("#mySelect option:selected");
 selOpt.remove();
}
// 清空
function col_clear() {
 var selOpt = $("#mySelect option");
 selOpt.remove();
}

以上方法為jQuery動(dòng)態(tài)添加、刪除和清空select。下面是純js的寫法：

復(fù)制代碼代碼如下:

var sid = document.getElementById("mySelect");
sid.options[sid.options.length]=new Option("text","value");   // 在select最后添加一項(xiàng)

其他常用的方法：

復(fù)制代碼代碼如下:

$("#mySelect").change(function(){//code...}); //select選中項(xiàng)改變時(shí)觸發(fā)

// 獲取select值
var text=$("#mySelect").find("option:selected").text();   //獲取Select選中項(xiàng)的Text
var value=$("#mySelect").val();   //獲取Select選中項(xiàng)的Value
var value=$("#mySelect option:selected").attr("value");   //獲取Select選中項(xiàng)的Value
var index=$("#mySelect").get(0).selectedIndex;   //獲取Select選中項(xiàng)的索引值，從0開始
var index=$("#mySelect option:selected").attr("index");   //不可用！??！
var index=$("#mySelect option:selected").index();   //獲取Select選中項(xiàng)的索引值，從0開始
var maxIndex=$("#mySelect option:last").attr("index");   //不可用?。。?BR>var maxIndex=$("#mySelect option:last").index();//獲取Select最大索引值，從0開始
$("#mySelect").prepend("<option value='value'>text</option>");   //Select第一項(xiàng)前插入一項(xiàng)

// 設(shè)置select值
//根據(jù)索引設(shè)置選中項(xiàng)
$("#mySelect").get(0).selectedIndex=index;//index為索引值 
//根據(jù)value設(shè)置選中項(xiàng)
$("#mySelect").attr("value","newValue"); 
$("#mySelect").val("newValue"); 
$("#mySelect").get(0).value = value; 
//根據(jù)text設(shè)置對(duì)應(yīng)的項(xiàng)為選中項(xiàng)
var count=$("#mySelect option").length; 
for(var i=0;i<count;i++) 
{
    if($("#mySelect").get(0).options[i].text == text) 
    { 
        $("#mySelect").get(0).options[i].selected = true; 
        break; 
    } 
} 

// 清空select
$("#mySelect").empty();

您可能感興趣的文章:

相關(guān)文章

easyui導(dǎo)出excel無法彈出下載框的快速解決方法
下面小編就為大家?guī)硪黄猠asyui導(dǎo)出excel無法彈出下載框的快速解決方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-11-11
簡(jiǎn)單易用的基于jQuery版仿新浪微博向下滾動(dòng)效果(附DEMO)
jquery版，簡(jiǎn)單易用的jQuery 版仿新浪微博向下滾動(dòng)效果，現(xiàn)在越來越發(fā)現(xiàn)jquery太強(qiáng)大咯，哈哈。
2011-02-02
JQuery Mobile實(shí)現(xiàn)導(dǎo)航欄和頁(yè)腳
導(dǎo)航欄由一組水平排列的鏈接構(gòu)成，通常位于頁(yè)眉或頁(yè)腳內(nèi)部。本文給大家介紹JQuery Mobile實(shí)現(xiàn)導(dǎo)航欄和頁(yè)腳的相關(guān)知識(shí)，需要的朋友參考下吧
2016-03-03
基于jQuery的ajax功能實(shí)現(xiàn)web service的json轉(zhuǎn)化
前面文章說過下次會(huì)給大家介紹詳細(xì)的基于web Services的JqueryAjax調(diào)用如何把一個(gè)datatable得數(shù)據(jù)轉(zhuǎn)化成JSON數(shù)據(jù),然后在客戶端再通過json2.js轉(zhuǎn)化成javascript對(duì)象。
2009-08-08
Jquery Ajax的Get方式時(shí)需要注意URL地方
我們要時(shí)刻注意瀏覽器緩存, 當(dāng)使用GET方式時(shí)要添加時(shí)間戳參數(shù) (net Date()).getTime() 來保證每次發(fā)送的URL不同, 可以避免瀏覽器緩存.
2011-04-04
jQuery實(shí)現(xiàn)廣告顯示和隱藏動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)廣告顯示和隱藏動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-07-07
JQuery中的$.getJSON 使用說明
jQuery中常用getJSON來調(diào)用并獲取遠(yuǎn)程的JSON字符串，將其轉(zhuǎn)換為JSON對(duì)象，如果成功，則執(zhí)行回調(diào)函數(shù)。
2011-03-03
jquery中cookie用法實(shí)例詳解(獲取,存儲(chǔ),刪除等)
這篇文章主要介紹了jquery中cookie用法,結(jié)合實(shí)例詳細(xì)分析了jQuery操作cookie的獲取,存儲(chǔ),刪除等操作,并附帶了Jquery操作Cookie記錄用戶查詢過信息實(shí)現(xiàn)方法,需要的朋友可以參考下
2016-01-01
jQuery?在圖片和文字中插入內(nèi)容實(shí)例
jQuery是一種流行的JavaScript庫(kù)，可以輕松地在網(wǎng)頁(yè)中插入圖片和文字。通過使用jQuery的插入功能，您可以在網(wǎng)頁(yè)上動(dòng)態(tài)地添加內(nèi)容，從而提高用戶體驗(yàn)。本文將介紹如何使用jQuery在圖片和文字中插入內(nèi)容，并提供一些實(shí)用的代碼示例。
2023-06-06
基于jQuery的仿flash的廣告輪播
很多網(wǎng)站的首頁(yè)都有廣告輪播，今天閑來看了一網(wǎng)站的首頁(yè)廣告輪播方式，是通過 jQuery的blockSlide插件實(shí)現(xiàn)的，然后自己測(cè)試了一下，很好。
2010-11-11