js select option物件小結

2021-07-22 07:11:03 字數 4298 閱讀 3735

先講jquery方式,再講原生方式

語法解釋:

1. $("#select_id").change(function());   //為select新增事件,當選擇其中一項時觸發

2. var checktext=$("#select_id").find("option:selected").text();  //獲取select選擇的text

3. var checkvalue=$("#select_id").val();  //獲取select選擇的value

4. var checkindex=$("#select_id ").get(0).selectedindex;  //獲取select選擇的索引值

5. var maxindex=$("#select_id option:last").attr("index");  //獲取select最大的索引值 

6.var cc1 = $(".formc select[@name='country'] option[@selected]").text(); //得到下拉列表的選中項的文字(注意中間有空格)

7.var cc2 = $('.formc select[@name="country"]').val(); //得到下拉列表的選中項的值

8.var cc3 = $('.formc select[@name="country"]').attr("id"); //得到下拉列表的選中項的id屬性值

9.$("#select").empty();//清空下拉框 //$("#select").html('');

11.$('#select_id')[0].selectedindex = 1; //select下拉框的第二個元素為當前選中值 

12.var item = $("select[@name=items] option[@selected]").text(); //獲 取select被選中項的文字 

稍微解釋一下:

1.select[@name='country'] option[@selected] 表示具有name 屬性,

並 且該屬性值為'country' 的select元素 裡面的具有selected 屬性的option 元素;

可以看出有@開頭的就表示後面跟 的是屬性。

語法解釋:

1. $("#select_id ").get(0).selectedindex=1;  //設定select索引值為1的項選中

2. $("#select_id ").val(4);   // 設定select的value值為4的項選中

3. $("#select_id option[text='jquery']").attr("selected", true);   //設定select的text值為jquery的項選中

語法解釋:

2. $("#select_id").prepend("請選擇");  //為select插入乙個option(第乙個位置)

3. $("#select_id option:last").remove();  //刪除select中索引值最大option(最後乙個)

4. $("#select_id option[index='0']").remove();  //刪除select中索引值為0的option(第乙個)

5. $("#select_id option[value='3']").remove();  //刪除select中value='3'的option

5. $("#select_id option[text='4']").remove();  //刪除select中text='4'的option

遍歷option和新增、移除option

function changeshipmethod(shipping)else //判斷是否已經打勾

var e = document.getelementbyid("selectid");

e. options= new option("文字","值") ;

//建立乙個option物件,即在標籤中建立乙個或多個文字

//options是個陣列,裡面可以存放多個文字這樣的標籤

1:options[ ]陣列的屬性:

length屬性---------長度屬性

selectedindex屬性--------當前被選中的框中的文字的索引值,此索引值是記憶體自動分配的(0,1,2,3.....)對應(第乙個文字值,第二個文字值,第三個文字值,第四個文字值..........)

2:單個option的屬性(---obj.options[obj.selecedindex]是指定的某個標籤,是乙個---)

text屬性---------返回/指定 文字

value屬性------返回/指定 值,與一致。

index屬性-------返回下標,

selected 屬性-------返回/指定該物件是否被選中.通過指定 true 或者 false,可以動態的改變選中項

defaultselected 屬性-----返回該物件預設是否被選中。true / false。

3:option的方法

增加乙個標籤-----obj.options.add(new("文字","值"));《增》

刪除乙個標籤-----obj.options.remove(obj.selectedindex)《刪》

獲得乙個標籤的文字-----obj.options[obj.selectedindex].text《查》

修改乙個標籤的值-----obj.options[obj.selectedindex]=new option("新文字","新值")《改》

刪除所有標籤-----obj.options.length = 0

獲得乙個標籤的值-----obj.options[obj.selectedindex].value

注意:a:上面的寫的是如這樣型別的方法obj.options.function()而不寫obj.funciton,是因為為了考慮在ie和ff 下的相容,如obj.add()只能在ie中有效.

b:obj.option中的option不需要大寫,new option中的option需要大寫

我的包包

我的本本

我的油油

我的擔子

根據這些東西,自己用jqeury ajax+json實現了乙個小功能如下:

js**:(只取了於select相關的**) 

/** 

* @description 構件聯動下拉列表 (用jquery 的ajax配合json實現)

* @prarm selectid 下拉列表的id

* @prarm method 要呼叫的方法名稱

* @prarm temp 此處存放軟體id

* @prarm url 要跳轉的位址

*/ function linkagejson(selectid,method,temp,url)

});

}/**

* @description 將json資料轉換成html資料格式

* @prarm selectid 下拉列表的id

* @prarm nodearray 返回的json陣列

* */

function coverjsontohtml(selectid,nodearray)

// 獲取退化構件列表

getcpgjthgl(selectid,'thgjdm');

} /**

* @description 清空下拉列表的值

* @prarm selectid 下拉列表的id

* @prarm index 開始清空的下標位置

*/ function isclearselect(selectid,index){

var length=document.getelementbyid(selectid).options.length;

while(length!=index){

//長度是在變化的,因為必須重新獲取

length=document.getelementbyid(selectid).options.length;

for(var i=index;i

html**: 

*引用軟體:

*引用分版:

退化構件:無

參考文件:

js select option物件小結

一基礎理解 var e document.getelementbyid selectid e.options new option 文字,值 建立乙個option物件,即在標籤中建立乙個或多個 options是個陣列,裡面可以存放多個這樣地標籤 1 options 陣列地屬性 length屬性 長度...

對建立游標對理解

步驟 1 首先經過底層的 編寫已經建立起了了python和資料庫之間的溝通橋梁並封裝成了模組,通過pymysql下的conntent 方法與之建立起了連線,例項物件。pymysql.connect 方法返回的是connections模組下的connection 例項,connect 方法傳參就是在給...

對勾函式 對勾函式

對勾函式是一種類似於反比例函式的一般函式。所謂的對勾函式,是形如 f x ax b x 的函式,是 一種教材上沒有但考試老喜歡考的函式,所以更加要注意和學習。一般的函式影象形似兩個中心對稱的 對勾,故名。當x 0 時,f x ax b x 有最小值 這裡為了研究方便,規定a 0 b 0 也就是當 x...