首頁 > 開發者 > 網站開發

HTML中Select的使用具體解釋

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：des   style   blog   http   java   color   

 

<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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More