JavaScript之select的總結

      這陣子學習google maps api,其中JavaScript是基礎。然而這個基礎從來沒有接觸過,有個面官說兩個星期內可以掌握JavaScript,我看JavaScript的書,也確實覺得這東西比ASP.NET好理解,不過實在是自己沒有花心思在這一塊的學習上,所以發現幾個星期下來,我的JavaScript還是毫無進步,哎,看來,還得後續發展啊。。。

     下面這些是我在做google maps api作業時遇到和已經解決了的問題,當然,是很小的問題:

     如何運用下拉框和列表框

    首先,下拉框和列舉框都是屬於DOM下的Select對象,在body中就是html文件的窗體標籤<select>...</select>中。只是列表框時,要設制其size>1。

     下拉框和列表框中所需要顯示的項目,則在標籤<option>...</option>中寫。

如:

 

1.在代碼中(即<script>...<script>)調用如下:

 var mysel=document.getElementById("yourname");

 

2.倘若想要調用的是該下拉框(或列表框)的value值,則

var myval=document.getElementById("yourname").value;

 

 

3.若想檢測某個選項是否有選中
if(mysel.selectedIndex > -1) {
//說明選中
} else {
//說明沒有選中
}

 

4.動態創建select

function createSelect(){

var mySel= document.createElement_x("select");
mySelect.id = "mySel";
document.body.appendChild(mySel);
}

 

5.添加選項option

function addOption(){

//根據id查找對象,
var mysel=document.getElementById("yourname");

//添加一個選項
mysel.add(new Option("文本","值"));//文本即上述在Body中創建的“項目1”,值即“value”值
}

 

6.刪除所有選項option

function removeAll(){
var mysel=document.getElementById("yourname");

mysel.options.length=0;

}

 

7.刪除一個選項option

function removeOne(){
var mysel=document.getElementById("yourname");

//index,要刪除選項的序號,這裏取當前選中選項的序號

var index=mysel.selectedIndex;
mysel.options.remove(index);
}

 

8.獲得選項option的值

var mysel=document.getElementById("yourname");

var index=mysel.selectedIndex; //序號,取當前選中選項的序號

var val = mysel.options[index].value;

 

9.獲得選項option的文本

var mysel=document.getElementById("yourname");

var index=mysel.selectedIndex; //序號,取當前選中選項的序號

var val = mysel.options[index].text;

 

10.修改選項option

var mysel=document.getElementById("yourname");

var index=mysel.selectedIndex; //序號,取當前選中選項的序號

var val =mysel.options[index]=new Option("新文本","新值");

 

下拉框:<select name="yourname" id="yourid">

             <option value="0">項目1</option>

             <option value="1">項目2</option>

             <option value="2">項目3</option> 

列表框:<select name="yourname" id="yourid" size=5>

             <option value="0">項目1</option>

             <option value="1">項目2</option>

             <option value="2">項目3</option>

 

(P.S以上內容,很多來自網絡其他同學的總結。。。)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章