<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>javascript select options text value</title>
<meta name="keywords" content="javascript select options text value add modify delete set">
<meta name="description" content="javascript select options text value add modify delete set">
<script language="javascript">
<!--
// Author: i@lxl.cn
// Modify: i@cnlei.com
function watch_ini(){ // 初始
for(var i=0; i<arguments.length; i++){
var oOption=new Option(arguments[i],arguments[i]);
document.getElementById("MySelect").options[i]=oOption;
}
}
function watch_add(f){ // 增加
var oOption=new Option(f.word.value,f.word.value);
f.keywords.options[f.keywords.length]=oOption;
}
function watch_sel(f){ // 编辑
f.word.value = f.keywords.options[f.keywords.selectedIndex].text;
}
function watch_mod(f){ // 修改
f.keywords.options[f.keywords.selectedIndex].text = f.word.value;
}
function watch_del(f){ // 删除
f.keywords.options.remove(f.keywords.selectedIndex);
}
function watch_set(f){ // 保存
var set = "";
for(var i=0; i<f.keywords.length; i++){
set += f.keywords.options[i].text + ";";
}
confirm(set);
}
//-->
</script>
</head>
<body>
<form name="watch" method="post" action="">
<select id="MySelect" name="keywords" size="10" onchange="watch_sel(this.form)"></select>
<script language="javascript">
<!--
watch_ini("我","你","妳","他","她","它","尔"); // 初始关键词
//-->
</script>
<input type="text" name="word" />
<input type="button" value="增加" onclick="watch_add(this.form);" />
<input type="button" value="修改" onclick="watch_mod(this.form);" />
<input type="button" value="删除" onclick="watch_del(this.form);" />
<input type="button" value="保存" onclick="watch_set(this.form);" />
</form>
</body>
</html>
- 描述: 运行效果图
- 大小: 68 KB
分享到：
相关推荐
这篇博客“向<select>元素中动态添加option”探讨的就是如何在JavaScript或jQuery的帮助下，实现在用户界面中动态地向`<select>`元素添加选项。 JavaScript是一种广泛使用的客户端脚本语言，它可以操作HTML元素，...
今天休完年假从家回来后，看到小林在QQ发的“监控管理示范代码”，核心原理用的是select元素的 add() 方法： 代码如下: function watch_ini(){ // 初始 for(var i=0; i<arguments.length; i++){ var ...
在处理表单时，经常需要检测用户是否已选择了某个 `<select>` 元素中的 `<option>` 项。以下是一个简单的示例来实现这一功能： ```javascript function hasSelection(selectElement) { if (selectElement....
### JavaScript 操作 Select 和 Option 的方法详解 ...点击“添加选项”会向 `<select>` 元素中添加两个城市选项；点击“处理选择”则会检查是否选择了值为 “10” 的选项，并根据条件执行相应操作。
在这个场景中，我们关注的是如何使用JavaScript来动态地添加和删除`<select>`元素中的`<option>`选项。`<select>`元素通常用于创建下拉列表，而`<option>`则代表下拉列表中的可选项。 首先，让我们深入理解提供的...
总结起来，jQuery动态添加`<option>`是通过创建新的`<option>`元素，设置其属性，然后将其添加到`<select>`元素中来实现的。这种方法使得网页的交互性增强，能够根据用户行为或数据变化实时更新下拉列表，极大地提高...
本文将深入探讨如何使用jQuery实现两个`<select>`元素之间的`<option>`选项转移操作，包括全选、单选以及删除功能。 首先，我们需要了解`<select>`和`<option>`的基本概念。`<select>`元素用于创建下拉列表，而`...
接下来，我们将讨论如何通过jQuery向`<select>`中添加和删除`<option>`项： ```javascript $("#select_id").append("<option value='Value'>Text</option>"); // 在末尾添加选项 $("#select_id").prepend("<option ...
`select[@name='country'] option[@selected]`表示选择name属性为'country'的select元素中被选中的option元素。`input[@type=radio][@checked]`则是选择被选中的单选按钮，而`input[@type=checkbox][@checked]`则...
这段代码返回当前选中项在select元素中的索引值。 4. **获取select中最大索引值**: ```javascript var maxIndex = $('#select_id option:last').attr("index"); ``` 这段代码获取了最后一个option元素的索引值...
本文将详细讲解如何通过 JavaScript 动态地添加、修改和删除 `<select>` 元素中的选项。 #### 描述：Javascript 操作 select 是表单中常见的一种，删除多个 select 值时出现的问题及解决方案 在处理 `<select>` ...
为了解决这个问题，我们可以先将需要删除的option元素保存在一个数组中，然后再进行删除操作，这样可以避免因为修改DOM而导致的索引变化问题。以下是优化后的代码示例： ```javascript function clearOption() { ...
在本文中，我们将深入探讨`select`的用法，包括如何创建、操作和处理`select`元素的各种事件。 1. **创建基本的`select`元素** ```html <select id="mySelect"> <option value="option1">Option 1</option> ...
总结一下，jQuery 提供了简单且强大的方法来处理 Select 元素中的 Option，包括获取选中项的信息、添加新的 Option、删除指定的 Option 或清空整个 Select。熟练掌握这些操作，能极大地提高开发效率，同时提升用户...
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作，包括对Select元素的处理。Select元素是HTML中用于创建下拉列表的标签，通常用于提供多个选项供用户选择。本文将深入探讨jQuery如何操作...
2. 通过JavaScript可以动态地操作select元素中的option选项，包括创建、删除、修改以及查询特定选项的属性和值。 3. options是一个数组，代表了select元素中所有的option选项。可以通过options[index]来访问数组中...
3. **添加选项**：要向`<select>`元素中添加新的`<option>`，可以使用`.add()`方法。例如： ```javascript var option = document.createElement('option'); option.text = '新选项'; option.value = 'newOption...
在JavaScript中，`select`元素和`option`元素是HTML表单中常用的部分，用于创建下拉列表。本文将深入探讨如何使用JavaScript操作这些元素，包括添加、删除、修改选项以及处理选择变化的事件。 首先，`select`元素是...
在Web开发中，Select元素用于创建下拉列表，而Option元素则是列表中的各个选项。这个话题通常与JavaScript或者DOM操作相关，因为这些技术常用来动态修改页面上的Select元素。 在HTML中，`<select>`标签定义了一个...