Option 和 Select 对象的基本使用

Option 和 Select 对象的基本使用,这是两个很常用到的标签(这里主要是介绍属性的使用)

 

这里是代码的样板

<html>
<head>

//js的方法
<script type="text/javascript">
function disable()
  {

//启动下拉列表
  document.getElementById("mySelect").disabled=true;
  }
function enable()
  {

//禁用下拉列表
  document.getElementById("mySelect").disabled=false;
  }
</script>


</head>
<body>

<form>
<select id="mySelect">
  <option>苹果</option>
  <option>桃子</option>
  <option>香蕉</option>
  <option>桔子</option>
</select>
<br /><br />

//点击触发事件,调用函数disable()
<input type="button" οnclick="disable()" value="禁用列表">
<input type="button" οnclick="enable()" value="启用列表">
</form>

</body>
</html>

 

1、禁用启用列表

document.getElementById("mySelect").disabled=true;

 

2、获取ID

document.getElementById("mySelect").form.id;

 

3、获取列表的数目

document.getElementById("mySelect").length;

 

4、改变下拉列表的可见长度 注意:(是可见) 默认为1个,这里为5个

document.getElementById("mySelect").size=5;

 

5、同时选中下拉列表中的多个选项,前提是要使用4中的size属性,把它设置为两个以上才可以选择多个项

document.getElementById("mySelect").multiple=true;

 

6、使用for循环输出下拉列表中的所有option内容

var x=document.getElementById("mySelect");
var y="";
  for (i=0;i<x.length;i++)
    {
    y+=x.options[i].text;
    y+="<br />";
    }
  document.write(y);

 

7、取得下拉列表中的索引位置

 var x=document.getElementById("mySelect").selectedIndex;
 var y=document.getElementsByTagName("option");
 var index = y[x].index;

 

8、改变下拉列表中的选中项

document.getElementById("这里写option的id").selected=true;

 

9、删除被选的选项

var x=document.getElementById("mySelect");
 x.remove(x.selectedIndex);


 

 

 


 

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值