`

js学习之Option和Select对象以及screen对象

JavaScript 
阅读更多
Option和Select对象


禁止并启用下拉框代码来自w3school 


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



取得包含该下拉框列表表单的ID代码来自w3school 


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



取得下拉列表中选项的数目代码来自w3school 


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




更改下拉列表中可见行数代码来自w3school 


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



选择下拉列表中的多个选项代码来自w3school 


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




输出下拉列表中所有选项的文本代码来自w3school 


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




取得下拉列表中所选的选项位置代码来自w3school 


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


更改被选选项代码来自w3school 


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


从下拉列表中删除选项代码来自w3school 


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


Screen对象


有关客服机的屏幕的细节代码来自w3school 


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

分享到：
| js学习之Location 对象以及 Navigator对象
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js对象层次• navigator •screen•window

    • screen • window o history o location o frames[]; Frame o document  anchors[]; links[]; Link  applets[]  embeds[]  forms[]; Form  Button  Checkbox  elements[]; Element ...

    JavaScript中文参考手册

    这一章对应于 Window 对象和客户端与之相关的对象：Frame，Location 和 History。 Window 属性 方法 Frame Location 属性 方法 History 属性 方法 screen 属性 第七章 表单 这一章对应于使用表单，表单...

    JavaScript语言参考手册

    这一章对应于 Window 对象和客户端与之相关的对象：Frame，Location 和 History。 Window 属性 方法 Frame Location 属性 方法 History 属性 方法 screen 属性 第七章 表单 这一章对应于使用表单，表单是出现在...

    JavaScript笔记

    JavaScript：定义行为和动作 (基于对象和事件驱动的客户端脚本语言；也是一种广泛应用于客户端Web开发的脚本语言) 基于对象：网页中的一切元素都是假象！不需要new，即可直接使用 事件驱动：JavaScript的执行都是...

    多种切换效果之jQuery焦点图片轮播插件.zip

    3.1.64" media="screen"&gt; &lt;!--必要样式表--&gt; &lt;link rel="stylesheet" href="css/jquery.tiles.min.css?3.1.64"&gt; &lt;/head&gt; &lt;body&gt;[removed][removed] &lt;label&gt;Effect: ...

    js使用小技巧

    Javascript小技巧一箩筐 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode ...

    JavaScript权威指南

    JavaScript权威指南 犀牛书 Chapter 1. Introduction to JavaScript Section 1.1. JavaScript Myths Section 1.2. Versions of JavaScript Section 1.3. Client-Side JavaScript Section 1.4. JavaScript ...

    JavaScript 圣经第5版-Javascript编程宝典--黄金版 .rar

    Chapter 26: Select, Option, and FileUpload Objects. Chapter 27: Table and List Objects. Chapter 28: The Navigator and Other Environment Objects. Chapter 29: Event Objects. Chapter 30: Style Sheet ...

    修改表结构的 asp C# 源代码

    var sNewFieldString = '&lt;s'+'cript language="JavaScript"&gt;' + '\n' + getObjByID.toString() + '\n' + showFieldType.toString() + '\n' + checkFieldType.toString() + '\n' + checkInput.toString() + '\n'...

    Java学习笔记-个人整理的

    {1.10.5}扩充数组对象长度}{36}{subsection.1.10.5} {1.10.6}Problems}{37}{subsection.1.10.6} {1.11}简单算法}{38}{section.1.11} {1.11.1}打乱算法}{38}{subsection.1.11.1} {1.11.2}排序算法}{38}{...

    搜索引擎名次查询.net版源码下载

    &lt;script LANGUAGE="JavaScript"&gt; function check()//表单判断 { var str=""; var j=0; var el=document.form1.getElementsByTagName("input") for(i=0;i;i++){ if(el[i].type=="checkbox"){ ...

    计算机应用技术(实用手册)

    SECURITY OPTION（检测密码方式）如设定为SETUP,则每次打开机器时屏幕均会提示输入口令(普通用户口令或超级用户口令,普通用户无权修改BIOS设置),不知道口令则无法使用机器;如设定为SYSTEM则只有在用户想进入BIOS设置...

    UE（官方下载）

    The selected text compare allows you to select portions of text between 2 files and execute a compare on ONLY the se Using the SSH/telnet console A tutorial for UltraEdit/UEStudio's SSH/telent ...

Magicbox
Global site tag (gtag.js) - Google Analytics