select標(biāo)簽設(shè)置默認(rèn)選中的選項(xiàng)方法
方法有兩種。
第一種 通過<select>的屬性來設(shè)置選中項(xiàng),此方法可以在動(dòng)態(tài)語言如php在后臺(tái)根據(jù)需要控制輸出結(jié)果。
< select id = "sel" > < option value = "1" >1</ option > < option value = "2" selected = "selected" >2</ option > < option value = "3" >3</ option > </ select >
第二種 為通過前端js來控制選中的項(xiàng):
< 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)簽選中項(xiàng)文本的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)動(dòng)態(tài)創(chuàng)建select
function createSelect(){ var mySelect = document.createElement( "select" ); mySelect.id = "mySelect" ; document.body.appendChild(mySelect); }
2)添加選項(xiàng)option
function addOption(){ //根據(jù)id查找對(duì)象, var obj=document.getElementById( 'mySelect' ); //添加一個(gè)選項(xiàng) obj.add( new Option( "文本" , "值" )); }
3)刪除所有選項(xiàng)option
function removeAll(){ var obj=document.getElementById( 'mySelect' ); obj.options.length=0; }
4)刪除一個(gè)選項(xiàng)option
function removeOne(){ var obj=document.getElementById( 'mySelect' ); //index,要?jiǎng)h除選項(xiàng)的序號(hào),這里取當(dāng)前選中選項(xiàng)的序號(hào) var index=obj.selectedIndex; obj.options.remove(index); }
5)獲得選項(xiàng)option的值
var obj=document.getElementById( 'mySelect' ); var index=obj.selectedIndex; //序號(hào),取當(dāng)前選中選項(xiàng)的序號(hào) var val = obj.options[index].value;
6)獲得選項(xiàng)option的文本
var obj=document.getElementById( 'mySelect' ); var index=obj.selectedIndex; //序號(hào),取當(dāng)前選中選項(xiàng)的序號(hào) var val = obj.options[index].text;
7)修改選項(xiàng)option
var obj=document.getElementById( 'mySelect' ); var index=obj.selectedIndex; //序號(hào),取當(dāng)前選中選項(xiàng)的序號(hào) 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)選中的選項(xiàng)方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
客戶端JavaScript的線程池設(shè)計(jì)詳解
這篇文章主要為大家介紹了客戶端JavaScript的線程池設(shè)計(jì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-01-01Three.Js實(shí)現(xiàn)看房自由小項(xiàng)目
目前隨著元宇宙概念的爆火,THREE技術(shù)已經(jīng)深入到了物聯(lián)網(wǎng)、VR、游戲、數(shù)據(jù)可視化等多個(gè)平臺(tái),今天我們主要基于THREE實(shí)現(xiàn)一個(gè)三維的VR看房小項(xiàng)目,感興趣的朋友跟隨小編一起看看吧2022-10-10Javascript學(xué)習(xí)筆記 delete運(yùn)算符
關(guān)于javascript的delete運(yùn)算符,MDN里有相關(guān)文檔。以下是我的學(xué)習(xí)筆記,更多是要關(guān)注特殊情況的使用和注意點(diǎn)。2011-09-09如何用JS實(shí)現(xiàn)網(wǎng)頁瀑布流布局
這篇文章主要介紹了如何用JS實(shí)現(xiàn)網(wǎng)頁瀑布流布局,幫助大家更好的利用JavaScript制作網(wǎng)頁,感興趣的朋友可以了解下2021-04-04由淺入深講解Javascript繼承機(jī)制與simple-inheritance源碼分析
Javascript語言對(duì)繼承實(shí)現(xiàn)的并不好,需要工程師自己去實(shí)現(xiàn)一套完整的繼承機(jī)制。下面我們由淺入深的系統(tǒng)掌握使用javascript繼承的技巧,對(duì)javascript繼承相關(guān)知識(shí)感興趣的朋友一起看看吧2015-12-12JavaScript中字符串GBK與GB2312的編解碼示例講解
在瀏覽器JavaScript環(huán)境中,可以使用TextEncoder和TextDecoder?API?來進(jìn)行?GBK?編碼和解碼,也可以使用?encodeURIComponent?函數(shù)對(duì)字符串進(jìn)行編碼,最好使用第三方庫,比如iconv-lite來實(shí)現(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é)合實(shí)例形式總結(jié)分析了js中forEach,for in,for of循環(huán)相關(guān)使用技巧與操作注意事項(xiàng),需要的朋友可以參考下2020-03-03