使用select对象添加、删除option。
语法：selectObject.add(option,before)
| option | 必需，要添加的选项，必需是 option 或 optgroup 元素。 |
| before | 必需，将要添加的选项添加到该选项之前。如果该参数是null，就添加到选项数组的末尾。 |
<html>
<head>
<script type="text/javascript">
//添加option
function addOption(){
/*
//使用添加元素的方式添加
var op=document.createElement("option");
var opV=document.createTextNode("666");
op.appendChild(opV);
//添加到最后
document.getElementById("sel").appendChild(op);
//添加到指定位置
document.getElementById("sel").insertBefore(op,document.getElementById("op1"));
*/
//使用select对象自身的方法添加
var sel = document.getElementById("sel");
var opt = document.createElement("option");
opt.text="777";
if(sel.selectedIndex>=0){//表示有选定位置
try{
sel.add(opt,sel.options[sel.selectedIndex]);//标准情况，指定是那个option对象
}catch(e){
sel.add(opt,sel.selectedIndex);//IE，指定option的位置即可
}
}else{//表示没有选定位置，那么就添加到最后
try{
sel.add(opt,null);//标准情况
}catch(ex){
sel.add(opt);//IE
}
}
}
//删除option
function removeOption(){
var sele = document.getElementById("sel");
//删除第一个option
//sele.remove(0);
//删除最后一个option
//sele.remove(sele.length-1);
//删除指定的option
sele.remove(sele.selectedIndex);
}
</script>
</head>
<body>
<select id="sel" size="10" >
<option id="op1">111</option>
<option>222</option>
<option>333</option>
<option>444</option>
<option>555</option>
</select>
<input type="button" value="addOption" onclick="addOption()" />
<input type="button" value="removeOption" onclick="removeOption()"/>
</body>
</html>
相关推荐
总结起来，`js`加载`select`项是一项基础的前端技术，而`JSelect`则通过JavaScript为`select`元素提供了丰富的自定义样式和交互功能，极大地提升了用户体验。在实际项目中，结合这两者可以构建出既实用又美观的下拉...
**纯JS超酷Select下拉框美化插件——TastySelect** 在网页设计中，Select下拉框作为数据选择的常见元素，其样式通常由浏览器默认控制，这往往不符合现代网页设计的美观需求。为了解决这个问题，开发者们创造了各种...
在JavaScript编程中，动态生成`select`元素中的`option`是一项常见的需求，特别是在网页交互或者数据展示时。本文将深入探讨如何使用JavaScript实现这一功能，同时结合提供的`autoSelect.html`和`autoselect.txt`...
### JavaScript操作表单Select元素的常用步骤 在Web开发中，`<select>`标签用于创建一个下拉列表供用户选择选项。使用JavaScript可以方便地控制这些下拉列表的行为，例如添加、删除或修改选项等。下面详细介绍如何...
以下是对标题和描述中提到的JavaScript控制`select`相关方法的详细说明： 1. **判断 select 选项中 是否存在 Value="paraValue"的 Item** 这个功能可以通过遍历`select`的`options`数组来实现，检查每个选项的`...
在JavaScript编程中，"js select多级联动"是一种常见的交互设计技术，主要用于创建具有层级关系的下拉选择框。这种技术常用于展示如地区选择、组织结构或产品分类等具有层次结构的数据。在这个场景中，当用户在第一...
- 参数`objSelect`表示`<select>`元素对象。 - 参数`objItemValue`为要判断的`<option>`元素的`value`值。 - 返回值为布尔值，若存在则返回`true`，否则返回`false`。 #### 二、对属性的增删改成 ##### 2.1 添加一...
然后，通过`.options`属性可以访问到`<select>`元素中的所有`<option>`对象，它是一个`HTMLOptionsCollection`对象。 2. **HTMLOptionsCollection**：这是HTML DOM中一个特殊的数组，包含了`<select>`元素的所有`...
在HTML和JavaScript编程中，`<select>`元素用于创建下拉列表，经常需要进行动态操作，比如添加、删除、修改选项，以及选中和清空选中的值。本篇文章将探讨如何通过JavaScript来实现这些功能，并判断控件是否存在。...
#### Select对象 Select对象表示HTML中的下拉列表，具有以下属性和方法： - `name`：获取下拉列表的名称。 - `length`：获取下拉列表中选项的数量。 - `selectedIndex`：获取当前选中项的索引。 - `options`：表示...
2. **初始化插件**：通过`$('select').countrySelect(options)`来初始化插件，`options`是可选的配置对象，用于设置默认国家、禁用特定国家等。 3. **配置选项**：例如，`defaultCountry`用于设置默认选中的国家，`...
根据给定的信息，本文将对JavaScript操作`<select>`元素的方法进行详细介绍，这些方法涵盖了创建、选择、删除选项等操作。 ### 1. 检查`<select>`元素是否存在值为`paraValue`的项 ```javascript function ...
压缩包中的“js全国城市三级联动下拉列表”可能包含了一个JavaScript文件，该文件已经封装了上述逻辑。我们可以引入这个JS文件到HTML中，通过调用提供的函数初始化和绑定事件，如： ```html <script src="js全国...
### JS面向对象教程详解 #### 一、JavaScript与面向对象编程基础 JavaScript作为一种脚本语言，自1995年诞生以来，不断发展完善，成为现代Web开发不可或缺的一部分。随着ES6标准的引入，JavaScript正式引入了类...
要获取JQuery对象，只需使用`$`符号，如`$('select#id')`。JQuery提供了`.val()`方法来获取或设置选中的`option`值，以及`.append()`和`.remove()`方法来添加或移除`option`。 ```javascript var $selectBox = $('#...
JavaScript面向对象是编程语言JavaScript的一个核心概念，它允许开发者通过对象来封装数据和操作数据的方法。在这份教程中，将详细介绍JavaScript面向对象的基础知识点，并通过代码示例来阐述如何在JavaScript中创建...
`hselect` 的核心功能在于其能够创建一个JavaScript对象，该对象可以绑定到页面上的特定DOM元素，并且允许我们对这些元素的伪元素应用CSS样式。这极大地扩展了JavaScript在样式控制方面的可能性，使得开发者无需依赖...
`Select2`的初始化方法接受一个配置对象，其中包含各种选项，如： ```javascript $('.select2').select2({ placeholder: '请选择...', // 设置占位符文本 allowClear: true, // 是否允许清除选择 ...
### JavaScript Select Option 操作详解 #### 一、检测是否有选中项 在处理表单时，经常需要检测用户是否已选择了某个 `<select>` 元素中的 `<option>` 项。以下是一个简单的示例来实现这一功能： ```javascript ...
在这个场景中，我们关注的是一个名为“iosSelect.js”的文件，它似乎是一个专门为iOS设备设计的模拟AJAX返回数据的库。AJAX（Asynchronous JavaScript and XML）是一种创建动态网页的技术，允许在不重新加载整个页面...