<html>
<head>
<title>js dom 动态生成option选项</title>
<script type="text/javascript">
function clearSelect() {
var mySelect = document.getElementById('ah');
//删除子元素
while(mySelect.hasChildNodes()) {
mySelect.removeChild(mySelect.firstChild);
}
//添加option
var myOption = document.createElement('option');
//添加属性
myOption.setAttribute('value','0');
//添加文本节点
var myText = document.createTextNode('---请选择---');
//将文本添加到option
myOption.appendChild(myText);
//将option添加到select
mySelect.appendChild(myOption);
for(var i=1;i<5;i++) {
var myOption1 = document.createElement('option');
myOption1.setAttribute('value',i);
var myCurrent = document.createTextNode('爱好' + i);
myOption1.appendChild(myCurrent);
mySelect.appendChild(myOption1);
}
}
function showValue(){
alert(document.getElementById('ah').value);
}
</script>
</head>
<body>
<select id="ah" onchange="showValue();">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="button" name="submit" value="submit" onclick="clearSelect();"/>
</body>
</html>
分享到：
相关推荐
在这个例子中，我们将深入探讨如何使用DOM解析XML文件，以理解和掌握XML文档的结构，并进行数据提取、修改和创建。 首先，XML（Extensible Markup Language）是一种标记语言，用于存储和传输数据，具有自描述性和...
这篇博客文章“JavaScript DOM操作一些例子”提供了实用的示例，帮助开发者更好地理解和应用DOM操作。 首先，我们需要理解DOM是什么。DOM是HTML和XML文档的结构化表示，它将网页内容组织成一个树形结构，每个元素、...
### JavaScript DOM编程艺术 第2版 #### 知识点概览 从提供的信息来看，《JavaScript DOM编程艺术 第2版》是一本专注于JavaScript及其与DOM（文档对象模型）交互的书籍。DOM是网页的核心组成部分之一，它定义了...
学习Javascript用《JavaScript DOM编程艺术》来入门最好不过了，老老实实看两遍，看完了你就会对JS有一个大概的了解，整本书都围绕着一个网页效果例子展开，你跟着老老实实敲一篇，敲完之后，你会发现这个效果不是常...
1 展示了一个动态操作表格的例子 2 有简单的CSS布局 3 主要供自己查阅参考
在JavaScript中，我们可以使用DOM API来操作和访问文档的任何部分。例如，可以通过DOM遍历找到所有动物节点，然后根据年龄排序，或者动态添加新的动物信息。 总结来说，这个"动物园"例子涵盖了从数据定义（XSD）、...
**JS DOM（JavaScript Document Object Model）** JS DOM是JavaScript与HTML或XML文档进行交互的一种标准接口。它允许JavaScript代码创建、访问和修改网页内容。DOM是文档对象模型（Document Object Model）的缩写...
书中的例子和实践项目都是精心设计的，旨在帮助读者更好地理解和掌握DOM编程技巧。通过学习这些案例，读者可以了解到如何在实际场景中运用所学知识，解决实际问题。 总之，《JavaScript DOM编程艺术》是一部深入浅...
学习JavaScript不仅可以帮助开发者创建交互式的网页，还能为进阶到Node.js后端开发奠定基础。 DOM是HTML和XML文档的标准表示方式，它是浏览器用来解析和操作网页内容的对象模型。JavaScript通过DOM API可以访问和...
《JavaScript DOM 编程艺术》是一本专注于使用JavaScript与Document Object Model（DOM）...通过阅读和实践书中的例子，你可以深入理解DOM的强大功能，并能熟练运用到自己的项目中，创造出更具活力和吸引力的Web应用。
在吃透了前面所说的书之后，接下来两本书的顺序已经无关紧要了，《JavaScript DOM高级程序设计》（注意和《JavaScript 高级程序设计》相区别）和《JavaScript设计模式》，这两本都是重量级的书，能让你的JS技术上一...
在JavaScript、Java、Python等语言中，都有DOM相关的API供开发者使用。 DOM的主要概念包括： 1. **节点（Node）**：XML文档中的每一个元素、属性、文本、注释、处理指令都是一个节点。根节点是整个文档的起点，而...
DOM是网页内容的结构化表示，JavaScript通过DOM API与这个结构交互，实现了网页的动态化。 在JavaScript中，DOM操作主要包括以下几大方面： 1. **获取元素**：`document.getElementById()`，`document....
JavaScript（简称JS）是一种广泛用于Web开发的轻量级编程语言，主要负责处理网页的动态效果和交互。DOM（Document Object Model）是HTML和XML文档的结构化表示，它允许程序和脚本通过编程方式来访问和修改网页内容。...
《JavaScript DOM 编程艺术》是一本深入探讨JavaScript与DOM（文档对象模型）交互的书籍。DOM是HTML和XML文档的结构化表示，通过JavaScript，我们可以利用DOM来动态地操作网页内容，实现丰富的用户交互效果。这本书...
7. **DOM操作**：使用JavaScript来操作文档对象模型（DOM），包括选择元素、添加/删除元素、改变元素属性等。 8. **AJAX和Fetch API**：实现异步数据请求，用于与服务器进行通信，获取或发送数据。 9. **Promise和...
学习Javascript用《JavaScript DOM编程艺术》来入门最好不过了，老老实实看两遍，看完了你就会对JS有一个大概的了解，整本书都围绕着一个网页效果例子展开，你跟着老老实实敲一篇，敲完之后，你会发现这个效果不是常...
"500JavaScript经典例子"这个资源集合提供了丰富的示例，覆盖了JavaScript的各种功能和应用，无论你是经验丰富的开发者还是初学者，都能从中受益。 JavaScript语法基础是学习的起点，包括变量、数据类型（如字符串...
在JavaScript中，操作`iframe`内的DOM元素是常见的需求，特别是在构建复杂的网页应用时。`iframe`（Inline Frame）是一种可以在HTML文档中嵌入另一个HTML文档的元素，它允许我们实现页面分隔、加载外部资源或者创建...
"javascript100个小例子"这个资源集合了100个JavaScript编程的小实例，涵盖了各种操作和效果，非常适合初学者进行实践学习，同时也为项目开发提供了现成的代码片段。 在JavaScript的学习中，了解和掌握以下几个关键...