<select>标签的使用技巧总结

5 篇文章 0 订阅

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 option被选中

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;

}

}

}

}

html select标签加链接3种方法

第一种 : 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>select加链接</title> 
</head> 
<body> 
<SCRIPT language=javascript> 
<!-- 
// open the related site windows 
function mbar(sobj) { 
var docurl =sobj.options[sobj.selectedIndex].value; 
if (docurl != "") { 
open(docurl,'_blank'); 
sobj.selectedIndex=0; 
sobj.blur(); 
} 
} 
//--> 
</SCRIPT> 
<Select onchange=mbar(this) name="select"> 
<OPTION selected>=== 合作伙伴 ===</OPTION> 
<OPTION value="http://www.baidu.com">百度</OPTION> 
<OPTION value="http://www.w3cschool.cn">w3cschool在线教程</OPTION> 
<OPTION value="http://www.youj.com">优聚</OPTION> 
</Select> 
</body> 
</html> 

第二种
<select name="pageselect" onchange="self.location.href=options[selectedIndex].value" > 
<OPTION value="http://www.baidu.com">百度</OPTION> 
<OPTION value="http://www.w3cschool.cn">w3cschool在线教程</OPTION> 
</select> 

第三种带跳转按钮的
<html><head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>select选择-按钮跳转</title> 
<script type="text/javascript"> 
function setsubmit() 
{ 
if(mylink.value == 0) 
window.location='http://www.baidu.com'; 
if(mylink.value == 1) 
window.location='http://www.w3cschool.cn'; 
if(mylink.value == 2) 
window.location='http://www.youj.com'; 
} 
</script> 
</head> 
<body> 
<select name="mylink" id="mylink"> 
<OPTION value="0">百度</OPTION> 
<OPTION value="1">w3cschool在线教程</OPTION> 
<OPTION value="2">优聚</OPTION> 
</select> 
<input type="button" id="btn" value="提交" onclick="setsubmit(this)" /> 
</body> 
</html> 


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值