js学习之Option和Select对象以及screen对象-优快云博客

本文介绍了如何使用JavaScript操作HTML中的Select元素，包括禁用和启用下拉框、获取表单ID、获取选项数量、更改可见行数等实用技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

[color=cyan][size=x-large]Option和Select对象
[/size][/color]

[b][color=blue]禁止并启用下拉框[/color][/b][b][color=orange]代码来自w3school
[/color][/b]

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

[b][color=blue]取得包含该下拉框列表表单的ID[/color][/b][b][color=orange]代码来自w3school
[/color][/b]

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

[b][color=blue]取得下拉列表中选项的数目[/color][/b][b][color=orange]代码来自w3school
[/color][/b]

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

[b][color=blue]更改下拉列表中可见行数[/color][/b][b][color=orange]代码来自w3school
[/color][/b]

<html>
<head>
<script type="text/javascript">
function changeSize()
  {
  document.getElementById("mySelect").size=4
  }
</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>

[b][color=blue]选择下拉列表中的多个选项[/color][/b][b][color=orange]代码来自w3school
[/color][/b]

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

[b][color=blue]输出下拉列表中所有选项的文本[/color][/b][b][color=orange]代码来自w3school
[/color][/b]

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

[b][color=blue]取得下拉列表中所选的选项位置[/color][/b][b][color=orange]代码来自w3school
[/color][/b]

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

  var z = document.getElementById("mySelect");
  var index = z.selectedIndex;
  var cname = z.options[index].text;
  alert(cname + "has the index of" + 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>

[b][color=blue]更改被选选项[/color][/b][b][color=orange]代码来自w3school
[/color][/b]

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

[b][color=blue]从下拉列表中删除选项[/color][/b][b][color=orange]代码来自w3school
[/color][/b]

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

[color=cyan][size=x-large]Screen对象
[/size][/color]

[b][color=blue]有关客服机的屏幕的细节[/color][/b][b][color=orange]代码来自w3school
[/color][/b]

<html>
<body>
<script type="text/javascript">
document.write("Screen resolution: ")
document.write(screen.width + "*" + screen.height)
document.write("<br />")
document.write("Available view area: ")
document.write(screen.availWidth + "*" + screen.availHeight)
document.write("<br />")
document.write("Color depth: ")
document.write(screen.colorDepth)
document.write("<br />")
document.write("Buffer depth: ")
document.write(screen.bufferDepth)
document.write("<br />")
document.write("DeviceXDPI: ")
document.write(screen.deviceXDPI)
document.write("<br />")
document.write("DeviceYDPI: ")
document.write(screen.deviceYDPI)
document.write("<br />")
document.write("LogicalXDPI: ")
document.write(screen.logicalXDPI)
document.write("<br />")
document.write("LogicalYDPI: ")
document.write(screen.logicalYDPI)
document.write("<br />")
document.write("FontSmoothingEnabled: ")
document.write(screen.fontSmoothingEnabled)
document.write("<br />")
document.write("PixelDepth: ")
document.write(screen.pixelDepth)
document.write("<br />")
document.write("UpdateInterval: ")
document.write(screen.updateInterval)
document.write("<br />")
</script>
</body>
</html>