HTML中Select的使用具體解釋

weixin_33901926發表於2015-03-11
HTML
 

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!--
//oSelect 列表的底部加入了一個新選項
function onload(){
var oOption = document.createElement("OPTION");
oOption.text="Ferrari";
oOption.value="4";
oSelect.add(oOption);
}

function fnChange(){
oData.value+=oCars.options[oCars.selectedIndex].text + " ";
}



//-->
</SCRIPT>
</head>

<body onload="onload()">
<!--手工加入一個Select-->
<!--1 uses the SELECT element to create a drop-down list box-->
<SELECT NAME="Cats" SIZE="1">
<OPTION VALUE="1">Calico
<OPTION VALUE="2">Tortie
<OPTION VALUE="3" SELECTED>Siamese
</SELECT>

<P>
<!--2 select 元素建立了多項選擇列表框，方法是設定了 SIZE 和 MULTIPLE 標籤屬性。要獲得多項選擇列表框的選中選項，則須遍歷 options 集合並檢查 SELECTED 是否被設為 true。-->
<SELECT ID="oSelect" NAME="Cars" SIZE="3" MULTIPLE> <!--此處設定了3和multiple-->
<OPTION VALUE="1" SELECTED>BMW
<OPTION VALUE="2">Porsche
<OPTION VALUE="3" SELECTED>Mercedes
</SELECT>

<P>
<!--3 下面演示Option的使用方法-->
<SELECT ID="oCars" SIZE="1" onchange="fnChange()">
<OPTION VALUE="1">寶馬
<OPTION VALUE="2">保時捷
<OPTION VALUE="3" SELECTED>大奔
</SELECT>

<P>
<TEXTAREA ID="oData"></TEXTAREA>


</body>

</html>

附：一些Select的技巧

1.動態建立select

function createSelect(){

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

2.加入選項option

function addOption(){

//依據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,要刪除選項的序號，這裡取當前選中選項的序號

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

5.獲得選項option的值

var obj=document.getElementById('mySelect');

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

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

6.獲得選項option的文字

var obj=document.getElementById('mySelect');

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

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

7.改動選項option

var obj=document.getElementById('mySelect');

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

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

8.刪除select

function removeSelect(){
var mySelect = document.getElementById("mySelect");
mySelect.parentNode.removeChild(mySelect);
}

9.設定select optin被中

function removeSelect(){
// 向辦件人員下拉選單動態加入員工
for ( var i = 0; i < json.length; i++) {
var newOption = new Option(json[i].empname, json[i].empid, i);
//向辦件人員下拉選單加入員工資訊
objDeal.options.add(newOption);
//客戶業務員的Id不為空
if(empbyDealEmpId!="" || empbyDealEmpId!=0){
//員工id等於下拉選單中的值,則下拉選單被選中
if(empbyDealEmpId==objDeal.options[i].value){
//推斷此下拉選單被選中
objDeal.options[i].selected=true;
}
}
}
}

11 檢測是否有選中 2if(objSelect.selectedIndex > -1) { 3//說明選中 4} else { 5//說明沒有選中 6} 7 82 刪除被選中的項 9objSelect.options[objSelect.selectedIndex] = null;10113 新增項12objSelect.options[objSelect.length] = new Option("你好","hello");13144 改動所選擇中的項15objSelect.options[objSelect.selectedIndex] = new Option("你好","hello");16175得到所選擇項的文字18objSelect.options[objSelect.selectedIndex].text;19206 得到所選擇項的值21objSelect.options[objSelect.selectedIndex].value;22

相關文章