HTML在Select具体的使用说明

时间：2022-09-13 23:27:44

<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;

}

}

}

}

1HTML在Select具体的使用说明1 检測是否有选中 2HTML在Select具体的使用说明HTML在Select具体的使用说明if(objSelect.selectedIndex > -1) HTML在Select具体的使用说明{ 3HTML在Select具体的使用说明//说明选中 4HTML在Select具体的使用说明HTML在Select具体的使用说明} else HTML在Select具体的使用说明{ 5HTML在Select具体的使用说明//说明没有选中 6HTML在Select具体的使用说明} 7HTML在Select具体的使用说明 8HTML在Select具体的使用说明2 删除被选中的项 9HTML在Select具体的使用说明objSelect.options[objSelect.selectedIndex] = null;10HTML在Select具体的使用说明11HTML在Select具体的使用说明3 添加项12HTML在Select具体的使用说明objSelect.options[objSelect.length] = new Option("你好","hello");13HTML在Select具体的使用说明14HTML在Select具体的使用说明4 改动所选择中的项15HTML在Select具体的使用说明objSelect.options[objSelect.selectedIndex] = new Option("你好","hello");16HTML在Select具体的使用说明17HTML在Select具体的使用说明5得到所选择项的文本18HTML在Select具体的使用说明objSelect.options[objSelect.selectedIndex].text;19HTML在Select具体的使用说明20HTML在Select具体的使用说明6 得到所选择项的值21HTML在Select具体的使用说明objSelect.options[objSelect.selectedIndex].value;22HTML在Select具体的使用说明

相关文章