select 中option的使用以及动态增加select

落日映苍穹つ 2022-09-17 12:17 846阅读 0赞

<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 οnlοad="onload()">  
  
  
<SELECT NAME="Cats" SIZE="1">  
<OPTION VALUE="1">Calico  
<OPTION VALUE="2">Tortie  
<OPTION VALUE="3" SELECTED>Siamese  
</SELECT>

<P>  
  
<SELECT ID="oSelect" NAME="Cars" SIZE="3" MULTIPLE>   
<OPTION VALUE="1" SELECTED>BMW  
<OPTION VALUE="2">Porsche  
<OPTION VALUE="3" SELECTED>Mercedes  
</SELECT>

</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被中

1 ![None.gif][] 1  检测是否有选中  2 ![ExpandedBlockStart.gif][] ![ContractedBlock.gif][] if (objSelect.selectedIndex  >   - 1 )  ![dot.gif][] \{  3![InBlock.gif][]//说明选中 4![ExpandedBlockStart.gif][]![ContractedBlock.gif][]\}   else   ![dot.gif][] \{  5![InBlock.gif][]//说明没有选中 6![ExpandedBlockEnd.gif][]\}  7 ![None.gif][]  8 ![None.gif][] 2  删除被选中的项  9 ![None.gif][]objSelect.options\[objSelect.selectedIndex\]  =   null ; 10 ![None.gif][] 11 ![None.gif][] 3  增加项 12 ![None.gif][]objSelect.options\[objSelect.length\]  =   new  Option( " 你好 " , " hello " ); 13 ![None.gif][] 14 ![None.gif][] 4  修改所选择中的项 15 ![None.gif][]objSelect.options\[objSelect.selectedIndex\]  =   new  Option( " 你好 " , " hello " ); 16 ![None.gif][] 17 ![None.gif][] 5 得到所选择项的文本 18 ![None.gif][]objSelect.options\[objSelect.selectedIndex\].text; 19 ![None.gif][] 20 ![None.gif][]6  得到所选择项的值 21 ![None.gif][]objSelect.options\[objSelect.selectedIndex\].value; 22

[None.gif]: /images/20220828/c0f5e1d4306a498e8b5eba3613f1eca7.png
[ExpandedBlockStart.gif]: http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif
[ContractedBlock.gif]: http://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif
[dot.gif]: http://www.cnblogs.com/Images/dot.gif
[InBlock.gif]: http://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif
[ExpandedBlockEnd.gif]: http://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif