select標(biāo)簽設(shè)置默認(rèn)選中的選項方法
方法有兩種。
第一種 通過<select>的屬性來設(shè)置選中項,此方法可以在動態(tài)語言如php在后臺根據(jù)需要控制輸出結(jié)果。
< select id = "sel" > < option value = "1" >1</ option > < option value = "2" selected = "selected" >2</ option > < option value = "3" >3</ option > </ select >
第二種 為通過前端js來控制選中的項:
< script type = "text/javascript" > function change(){ document.getElementById("sel")[2].selected=true; } </ script > < select id = "sel" > < option value = "1" >1</ option > < option value = "2" >2</ option > < option value = "3" >3</ option > </ select > < input type = "button" value = "修改" onclick = "change()" />
獲取<select>標(biāo)簽選中項文本的js代碼為:
var val = document.all.Item.options[document.all.Item.selectedIndex].text var i=document.getElementById( 'sel' ).options[document.getElementById( 'sel' ).selectedIndex].value;
一些其它操作<select>標(biāo)簽的技巧如下:
1)動態(tài)創(chuàng)建select
function createSelect(){ var mySelect = document.createElement( "select" ); mySelect.id = "mySelect" ; document.body.appendChild(mySelect); }
2)添加選項option
function addOption(){ //根據(jù)id查找對象, var obj=document.getElementById( 'mySelect' ); //添加一個選項 obj.add( new Option( "文本" , "值" )); }
3)刪除所有選項option
function removeAll(){ var obj=document.getElementById( 'mySelect' ); obj.options.length=0; }
4)刪除一個選項option
function removeOne(){ var obj=document.getElementById( 'mySelect' ); //index,要刪除選項的序號,這里取當(dāng)前選中選項的序號 var index=obj.selectedIndex; obj.options.remove(index); }
5)獲得選項option的值
var obj=document.getElementById( 'mySelect' ); var index=obj.selectedIndex; //序號,取當(dāng)前選中選項的序號 var val = obj.options[index].value;
6)獲得選項option的文本
var obj=document.getElementById( 'mySelect' ); var index=obj.selectedIndex; //序號,取當(dāng)前選中選項的序號 var val = obj.options[index].text;
7)修改選項option
var obj=document.getElementById( 'mySelect' ); var index=obj.selectedIndex; //序號,取當(dāng)前選中選項的序號 var val = obj.options[index]= new Option( "新文本" , "新值" );
8)刪除select
function removeSelect(){ var mySelect = document.getElementById( "mySelect" ); mySelect.parentNode.removeChild(mySelect); }
以上這篇select標(biāo)簽設(shè)置默認(rèn)選中的選項方法就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Javascript學(xué)習(xí)筆記 delete運(yùn)算符
關(guān)于javascript的delete運(yùn)算符,MDN里有相關(guān)文檔。以下是我的學(xué)習(xí)筆記,更多是要關(guān)注特殊情況的使用和注意點。2011-09-09由淺入深講解Javascript繼承機(jī)制與simple-inheritance源碼分析
Javascript語言對繼承實現(xiàn)的并不好,需要工程師自己去實現(xiàn)一套完整的繼承機(jī)制。下面我們由淺入深的系統(tǒng)掌握使用javascript繼承的技巧,對javascript繼承相關(guān)知識感興趣的朋友一起看看吧2015-12-12JavaScript中字符串GBK與GB2312的編解碼示例講解
在瀏覽器JavaScript環(huán)境中,可以使用TextEncoder和TextDecoder?API?來進(jìn)行?GBK?編碼和解碼,也可以使用?encodeURIComponent?函數(shù)對字符串進(jìn)行編碼,最好使用第三方庫,比如iconv-lite來實現(xiàn)2023-12-12JS和jQuery使用submit方法無法提交表單的原因分析及解決辦法
這篇文章主要介紹了JS和jQuery使用submit方法無法提交表單的原因分析及解決辦法的相關(guān)資料,需要的朋友可以參考下2016-05-05js中forEach,for in,for of循環(huán)的用法示例小結(jié)
這篇文章主要介紹了js中forEach,for in,for of循環(huán)的用法,結(jié)合實例形式總結(jié)分析了js中forEach,for in,for of循環(huán)相關(guān)使用技巧與操作注意事項,需要的朋友可以參考下2020-03-03