`

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

    `forms[]`内的对象包括了各种表单元素，如`Button`（按钮）、`Checkbox`（复选框）、`Input`（输入框）、`Select`（下拉列表）、`Option`（选项）等，每个元素都有自己的属性和方法，用于交互和验证。 在JavaScript...

    第十五章JavaScript-HTMLDOM对象2022优秀文档.ppt

    本章主要讨论了几个关键的DOM对象，包括History、Location、Screen、Navigator、Event、Document、Form、Select和Option对象，以及如何利用它们实现浏览器交互。 首先，History对象允许开发者对用户的浏览历史进行...

    Html dom _BOM 模型 _事件处理机制 _面向对象基础

    DOM中常见的对象包括Select、Option、Table、TableRow、TableCell等，这些对象有着特定的属性和方法，比如Select对象的选项数、Option对象的文本和值、Table对象的行和列操作等。 2. BOM模型（浏览器对象模型） BOM...

    js基础学习 javascript学习资料

    根据提供的文件信息，我们可以整理出一系列关于JavaScript基础知识的学习要点，这些要点覆盖了文档的基本操作、数据类型、控制结构以及常用内置对象的使用方法等。下面将详细解释每一项提到的知识点： ### 1. `...

    js对象关系图 方便dom操作

    JavaScript对象参考手册是学习JS对象及其属性和方法的重要资源。例如，Array对象提供了处理数组的各种方法，如push、pop、shift、unshift、splice等；Boolean对象用于处理布尔值；Date对象处理日期和时间；Math对象...

    JavaScript基本的入门

    以上内容涵盖了 JavaScript 的基本概念和核心语法，以及常用的内置对象和面向对象编程的基础知识。对于初学者来说，这些都是非常重要的基础知识，掌握了这些内容之后，就可以开始编写简单的 JavaScript 应用了。随着...

    JavaScript中文参考手册

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

    JavaScript语言参考手册

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

    javascript学习资料

    通过这些内容的学习，读者不仅可以了解到JavaScript的基本概念和语法，还能掌握如何利用JavaScript与DOM进行互动，以及如何处理表单数据等实用技能。对于初学者而言，这份资料是一个很好的起点，有助于快速上手...

    JavaScript笔记

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

    网页设计常用的Javascript特效代码

    在网页设计中，JavaScript是一种非常重要的脚本语言，它能够为网页增添丰富的动态效果和交互性。以下是一些常见的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: ...

    bootstrap select下拉搜索插件使用方法详解

    首先，要使用Bootstrap Select，你需要引入必要的CSS和JavaScript文件。在HTML文件中添加以下链接： ```html &lt;link rel="stylesheet" href="css/bootstrap-select.css" rel="external nofollow"&gt; &lt;script src="js/...

    js使用小技巧

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

    j2ee面试题及答案全

    15. **JavaScript对象**：`Window`, `Navigator`, `Screen`, `History`, `Location`是JavaScript中的内置对象，分别代表浏览器窗口、浏览器信息、屏幕属性、浏览历史和URL信息。 16. **JS全局变量定义**：在函数...

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

    html+css仿写电商网站商品购买页面

    - 商品规格选择：如颜色、尺码，可使用`&lt;select&gt;`和`&lt;option&gt;`组合实现。 4. 响应式布局： - 使用`media queries`：根据设备屏幕尺寸应用不同的CSS规则，例如`@media screen and (max-width: 768px) {...}`。 - ...

    107个javascript常用语句

    8. **数组赋值给下拉菜单**：通过遍历数组并设置`option`元素的`value`和`text`属性，可以动态地填充`select`下拉菜单。 9. **文档输出**：`document.write("")` 用于向HTML文档流中写入内容，通常在页面加载期间...

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