js学习手册--Option 和 Select 对象

来源：互联网发布：阿里云ftp文件上传编辑：程序博客网时间：2024/05/20 19:15

转载：http://www.w3school.com.cn/example/hdom_examples.asp

1.1禁用并启用下拉列表

<html><head><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 /><input type="button" onclick="disable()" value="禁用列表"><input type="button" onclick="enable()" value="启用列表"></form></body></html>

2.1取得包含该下拉列表的表单的 id

<html><body><form id="myForm"><select id="mySelect">  <option>苹果</option>  <option>桃子</option>  <option>香蕉</option>  <option>桔子</option></select></form><p>该表单的 id 是：<script type="text/javascript">document.write(document.getElementById("mySelect").form.id)</script></p></body></html>

3.1取得下拉列表中选项的数目

<html><head><script type="text/javascript">function getLength()  {  alert(document.getElementById("mySelect").length)  }</script></head><body><form><select id="mySelect">  <option>苹果</option>  <option>桃子</option>  <option>香蕉</option>  <option>桔子</option></select><input type="button" onclick="getLength()" value="在这个列表中，有多少选项？"></form></body></html>

4.1更改下拉列表中的可见行数

<html><head><script type="text/javascript">function changeSize()  {  document.getElementById("mySelect").size=3  }</script></head><body><form><select id="mySelect">  <option>苹果</option>  <option>桃子</option>  <option>香蕉</option>  <option>桔子</option></select><input type="button" onclick="changeSize()" value="改变大小"></form></body></html>

5.1选择下拉列表中的多个选项

<html><head><script type="text/javascript">function selectMultiple()  {  document.getElementById("mySelect").multiple=true  }</script></head><body><form><select id="mySelect" size="4">  <option>苹果</option>  <option>桃子</option>  <option>香蕉</option>  <option>桔子</option></select><input type="button" onclick="selectMultiple()" value="选择多个"></form><p>在您点击 “选择多个” 按钮之前，请尝试同时选取多个选项。在点击 “选择多个” 按钮之后，请再试一次。</p></body></html>

7.1输出下拉列表中所有选项的文本

<html><head><script type="text/javascript">function getOptions()  {  var x=document.getElementById("mySelect");  var y="";  for (i=0;i<x.length;i++)    {    y+=x.options[i].text;    y+="<br />";    }  document.write(y);  }</script></head><body><form>请选择您喜欢的水果：<select id="mySelect">  <option>苹果</option>  <option>桃子</option>  <option>香蕉</option>  <option>桔子</option></select><br /><br /><input type="button" onclick="getOptions()" value="输出所有选项"></form></body></html>

8.1取得下拉列表中所选的选项的索引位置

<html><head><script type="text/javascript">function alertIndex()  {  var x=document.getElementById("mySelect").selectedIndex;  var y=document.getElementsByTagName("option");  alert(y[x].text + " has the index of: " + y[x].index);  }</script></head><body><form>请选择您喜欢的水果：<select id="mySelect">  <option>苹果</option>  <option>桃子</option>  <option>香蕉</option>  <option>桔子</option></select><br /><br /><input type="button" onclick="alertIndex()" value="显示被选水果的 index"></form></body></html>

9.1更改被选选项

<html><head><script type="text/javascript">function selectOrange()  {  document.getElementById("orange").selected=true;  }</script></head><body><form>请选择您喜欢的水果：<select>  <option id="apple">苹果</option>  <option id="orange">桔子</option>  <option id="pineapple" selected="selected">菠萝</option>  <option id="banana">香蕉</option></select><br /><br /><input type="button" onclick="selectOrange()" value="选择桔子"></form></body></html>

10.1从下拉列表中删除选项

<html><head><script type="text/javascript">function removeOption()  {  var x=document.getElementById("mySelect")  x.remove(x.selectedIndex)  }</script></head><body><form><select id="mySelect">  <option>苹果</option>  <option>桃子</option>  <option>香蕉</option>  <option>桔子</option></select><input type="button" onclick="removeOption()" value="删除被选的选项"></form></body></html>