<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
</head>
<body onload="f()">
<select id="s">
<option value="55">就是这样的。</option>
</select>
</body>
<script>
function f(){
var s = document.getElementById('s');
for(var i=0; i<10; i++){
var option = document.createElement('option');
//s.insertBefore(option,s.options[0]);
/* 标准做法使用 s.options.add() */
s.options.add(option)
/* 非标准做法就是用 insertBefore 或者 appendChild */
//s.appendChild(option);
option.text = 'hello' + i;
//option.innerHTML = 'Hello' + i;
option.value = i;
// s.appendChild(option);
}
/* 当且仅当用 s.options.add() 添加项时才有效 */
s.selectedIndex = 4 ;
}
</script>
</html>
关于 select 的添加 option 应该注意的问题。
标准的做法如上
也就是说，标准的做法是 s.options.add();
但是如果你一定要用 s.appendChild(option);
注意了，你只能用如下两种方式之一:
1.
s.appendChild(option);
option.text = 'hello world';
option.value =3;
也就是，一定要先添加到 select 中，然后再为 option 赋值。否则在 FF 下是显示正常的，但是在 IE6 中显示的是空白
2. 如果你要讲 option.text 和 option.value 的赋值放在前面，那么请用 option.innerHTML 而不是 option.text
如下:
option.innerHTML = 'hello world';
opion.value = 3;
option.appendChild(option);
又看了一个牛人的博客，得到了第三种解决方式。
var op=document.createElement("option"); // 新建OPTION (op)
op.setAttribute("value",0); // 设置OPTION的 VALUE
op.appendChild(document.createTextNode("请选择---")); // 设置OPTION的 TEXT
select.appendChild(op); // 为SELECT 新建一 OPTION(op)
也就是所，你的 op 的text 是通过 appendChild(.... createTextNode ) 来进行的。。
分享到：
相关推荐
这篇博客“向<select>元素中动态添加option”探讨的就是如何在JavaScript或jQuery的帮助下，实现在用户界面中动态地向`<select>`元素添加选项。 JavaScript是一种广泛使用的客户端脚本语言，它可以操作HTML元素，...
然后，使用`select.appendChild(option)`将`option`元素添加到`select`元素中。 ```javascript const select = document.createElement('select'); options.forEach(optionText => { const opt = document....
本文将详细讨论一个特定的JavaScript问题，即在Internet Explorer（IE）浏览器中使用`innerHTML`属性向`<select>`元素插入`<option>`标签时遇到的bug，以及如何解决这个bug以实现跨浏览器兼容性，包括IE、Firefox、...
在网页开发中，`<select>`元素用于创建下拉列表，而`<option>`标签则定义了下拉列表中的选项。有时候，我们可能需要在页面加载时预设一个选项为默认选中状态，或者根据用户操作动态改变选中状态。在JavaScript中，这...
总的来说，为"select option"添加鼠标提示功能是提升用户界面友好性的重要手段。通过熟练掌握HTML、CSS和JavaScript，开发者可以创建出更加智能、人性化的网页和应用。同时，不断学习和研究相关的IT资源，如压缩包中...
当需要向select元素动态添加选项时，我们可以使用JavaScript来创建option元素，并将其添加到select中。这个过程可以通过原生JavaScript API实现。 2. 原生JavaScript操作DOM来创建option： ```javascript // 假设...
其中一个经典的问题就是尝试使用JavaScript的innerHTML属性来修改表格（Table）或选择列表（Select）的内容，但在IE6、7、8、9版本中，这可能会遇到一些挑战。innerHTML属性通常用于设置或获取元素的HTML内容，但在...
例如，假设我们有一个空的`<select>`元素，我们可以通过以下方式向其中添加新的`<option>`元素： ```html <select id="mySelect"></select> ``` 在JavaScript中，我们可以这样操作： ```javascript var select = ...
虽然`select`元素的样式化相对有限，但可以通过自定义`<option>`元素的`innerHTML`来实现一定程度的定制。对于更复杂的样式化，可以考虑使用JavaScript库如Chosen或Select2。 8. **使用`select`元素进行数据绑定** ...
标题中提到的问题是，如果在IE6、IE7或IE8中，`<option>`元素没有设定`value`属性，那么在`<select>`的`onchange`事件中，`this.value`将返回空字符串。相比之下，现代浏览器如IE9、Firefox、Safari、Chrome和Opera...
select.innerHTML = ''; // 清空现有选项 data.forEach(item => { var option = document.createElement('option'); option.value = item.id; option.text = item.name; select.add(option); }); }); }); ...
citySelect.innerHTML = '<option value="">请选择城市</option>'; data.forEach(city => { var option = document.createElement('option'); option.value = city.id; option.text = city.name; citySelect....
接着，它遍历数据数组，为每个对象创建一个新的`<option>`元素，设置其值和是否选中，最后将新选项添加到`<select>`元素中。 如果你的应用使用了诸如jQuery或Vue.js这样的库，那么这个过程可能会有所不同。例如，在...
**注意**：第一种方法更常见且推荐使用，因为它不会触发浏览器的事件，而第二种方法可能会触发一些基于`innerHTML`更改的事件监听器。 #### 2.2 使用表单名称和控件名称 如果`<select>`元素位于表单内，还可以使用`...
JavaScript 中的 Option onclick 事件是用户在Select 元素中选择一个选项时触发的事件，但是在 Internet Explorer（IE）浏览器中，该事件无法正确触发，这给开发者带来了不少麻烦。今天，我们将讨论如何解决这个问题...
6. **添加与删除功能**：如果压缩包中的代码还包含了添加和删除选项的功能，那么这部分会涉及到`appendChild`和`removeChild`方法，用于在`select`元素中添加新的`option`或移除已有的`option`。 7. **优化用户体验...
<option value="option2">Option 2</option> </my-select> ``` 文件名“2009.8.26”可能是指这个自定义组件的创建日期或版本号。在实际的项目中，我们可能会看到类似的命名方式来追踪文件的修改历史。 总结来说...
总的来说，这个JavaScript模拟的select控件`jselect`解决了原生select元素在不同浏览器下样式不统一和美观度不足的问题，提供了自定义的UI样式和更丰富的交互体验。通过封装的API，开发者可以方便地在项目中使用这个...
JavaScript 实现 Select 美化方法 JavaScript 是一种广泛应用于网页开发的编程语言，具有很强的交互性和动态性。随着 Web 应用程序的普及，美化 Select 标签变得非常重要。下面将介绍如何使用 JavaScript 实现 ...