<html>
<head>
<title>添加与删除Option对象</title>
<script language="JavaScript">
// 添加选项
function addOption(pos){
var objSelect = document.myForm.mySelect;
// 取得字段值
var strName = document.myForm.myOptionName.value;
var strValue = document.myForm.myOptionValue.value;
// 建立Option对象
var objOption = new Option(strName,strValue);
if (pos == -1 & pos > objSelect.options.length)
objSelect.options[objSelect.options.length] = objOption;
else
objSelect.add(objOption, pos);
}
// 删除选项
function deleteOption(type){
var objSelect = document.myForm.mySelect;
if (type == true)
objSelect.options[objSelect.selectedIndex] = null;
else
objSelect.remove(objSelect.selectedIndex);
}
// 显示选项信息
function showOption(objForm){
var objSelect = objForm.mySelect;
var name = objSelect.options[objSelect.selectedIndex].text;
var value = objSelect.options[objSelect.selectedIndex].value;
alert(name + " = " + value);
}
</script>
</head>
<body>
<h2>添加与删除Option对象</h2>
<hr>
<form name="myForm">
<select name="mySelect">
<option value="中国" Selected>中国</option>
<option value="日本">日本</option>
<option value="美国">美国</option>
</select>
<input type="button" onclick="showOption(this.form)" value="显示">
<input type="button" onclick="deleteOption(true)" value="删除">
<input type="button" onclick="deleteOption(false)" value="Remove方法">
选项名称 : <input type="text" name="myOptionName" value="英国">
选项的值 : <input type="text" name="myOptionValue" value="value4">
<input type="button" onclick="addOption(-1)" value="添加">
<input type="button" onclick="addOption(0)" value="插入">
</form>
</body>
</html>
分享到：
相关推荐
1.动态创建select 代码如下: ...添加选项option 代码如下: function addOption(){ //根据id查找对象， var obj=document.getElementById(‘mySelect’); //添加一个选项 obj.add(new Option(“文本”,”值”)); /
JavaScript是一种广泛使用的客户端脚本语言，它可以操作HTML元素，包括添加、删除和修改DOM（文档对象模型）节点。在本案例中，`<option>`元素就是DOM的一部分，我们可以通过JavaScript的DOM操作方法来对其进行动态...
jQuery库提供了一种简单的方法来操作DOM（文档对象模型），使得插入、删除和修改元素变得易如反掌。要动态添加`<option>`，我们可以使用`append()`方法。以下是一个示例： ```javascript // 创建一个新的option元素...
动态地添加和删除`option`对象对于构建交互式用户界面非常有用，特别是在需要根据用户操作或后台数据变化更新下拉列表内容时。本文将详细介绍如何使用JavaScript来实现这个功能，并提供示例代码。 ### 一、动态删除...
在JavaScript中，我们可以直接通过DOM操作来创建、访问、修改和删除Option对象。以下是对Option对象及其相关操作的详细说明： 1. 创建Option对象： - `document.createElement('option')`：此方法用于在内存中创建...
这里我们创建了一个新的 `<option>` 对象，然后通过调用 `add` 方法将其添加到指定的 `<select>` 元素中。 #### 四、删除所有 `<option>` 项 有时候可能需要清空 `<select>` 元素中的所有 `<option>` 项。这可以...
"laravel-option"可能旨在提高应用的灵活性，让开发者可以方便地添加、修改和删除应用的运行时选项，而不必修改核心代码或配置文件。 6. 安装与使用："laravel-option"作为一个开源扩展，它的安装通常会通过...
在这个例子中，我们首先获取一个数据数组，然后使用`$.each()`遍历每个对象，创建一个新的`<option>`元素，并设置它的`value`属性为对象的`id`，文本内容为`name`，最后将其添加到`<select>`中。 总之，jQuery提供...
添加或删除`option`元素时，确保使用`appendChild`、`insertBefore`、`removeChild`等标准DOM操作方法，而不是依赖于特定浏览器的实现。 总之，处理`option`属性的JS事件时，应始终考虑浏览器兼容性和事件处理的...
对于添加或删除`option`，JavaScript提供了 `.add(newOption, beforeExistingOption)` 方法，以及 `.remove(index)` 方法。例如，要添加一个新的选项，可以这样做： ```javascript var newOption = document....
总的来说，select和option对象是Web前端开发中非常基础且重要的组件，熟练掌握它们的属性和方法对于开发动态交互式的网页界面是必不可少的。通过本文的讲解，希望读者能够对这两个对象有一个全面的了解，并在实际...
这里首先获取了ID为"sltid"的`<select>`元素，然后使用`for`循环创建新的`Option`对象并将其添加到`options`数组中。最后，通过`options.length`获取当前`<select>`的选项数量，并在末尾添加一个新的`Option`。 ###...
接下来，我们来看如何利用 jQuery 添加和删除 `<select>` 的 `<option>` 项： ```javascript jQuery("#select_id").append("<option value='Value'>Text</option>"); // 为Select追加一个Option(下拉项) jQuery("#...
通过这种方式，我们可以实现在AngularJS中动态添加下拉列表的Option，用户可以输入新的选项，确认后添加到下拉列表中，同时还可以删除已确认的选项。这种动态交互增强了用户的体验，同时也方便了后台管理设置的实时...
optionTree插件还支持多种配置项，如异步加载数据、设置默认值、添加回调函数等，这些都可以通过配置对象进行设置。同时，它提供了丰富的API，如`refresh`方法用于刷新下拉框，`selectNode`方法用于选中特定节点，...
这些操作包括动态创建select元素、添加和删除option选项、清空所有选项、获取选中项的值和文本以及修改和删除select元素。掌握这些操作对于进行网页交互式界面设计十分重要，也是前端开发者必须具备的基础技能之一。