`
fuyuan_jr
  • 浏览: 10195 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
社区版块
存档分类
最新评论

select 下拉列表(添加,删除option对象)

DWR 
阅读更多
<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方法"><br><br>
选项名称 : <input type="text" name="myOptionName" value="英国"><br>
选项的值 : <input type="text" name="myOptionvalue" value="value4">
<input type="button" onclick="addOption(-1)" value="添加">
<input type="button" onclick="addOption(0)" value="插入">
</form>
</body>
</html>
分享到:
评论
3 楼 fuyuan_jr 2006-11-14  
谢谢~~
2 楼 fuyuan_jr 2006-11-14  
谢谢~~
1 楼 zelsa 2006-11-10  
可以去看看DWR的util.js中的addOptions和removeAllOptions方法,已经经封装的很好。

http://getahead.ltd.uk/dwr/browser/lists

相关推荐

    向元素中动态添加option

    在网页开发中,`&lt;select&gt;`元素用于创建下拉列表,常常用于用户选择操作。而动态添加`&lt;option&gt;`是常见的交互设计,特别是在数据量大或者数据需要实时更新的场景中。这篇博客“向&lt;select&gt;元素中动态添加option”探讨的...

    js select option

    在提供的压缩包文件中,有三个关于JQuery操作`select`的HTML文档:`JQuery操作select下拉列表框.htm`、`JQuery操作select下拉列表框2.htm`、`jQuery对select操作.html`。这些文档可能包含了更多关于如何利用JQuery...

    js Select下拉列表框进行多选、移除、交换内容的具体实现方法

    在实际应用中,我们可能会遇到需要对SELECT下拉列表进行复杂操作的情况,比如实现多选、移除或交换内容等。下面将详细介绍如何使用JavaScript来实现这些功能。 首先,我们需要了解SELECT元素的基本结构。一个基本的...

    一个select下拉的js脚本

    你可以根据需要动态地添加、删除或更新`select`中的选项,例如从服务器获取数据后填充下拉列表。 7. `select`属性和方法: - `selectedIndex`: 返回或设置被选中的`option`的索引。 - `options`: 返回一个`...

    jquery动态添加option

    jQuery库提供了一种简单的方法来操作DOM(文档对象模型),使得插入、删除和修改元素变得易如反掌。要动态添加`&lt;option&gt;`,我们可以使用`append()`方法。以下是一个示例: ```javascript // 创建一个新的option元素...

    JS动态添加与删除select中的Option对象(示例代码)

    动态地添加和删除`option`对象对于构建交互式用户界面非常有用,特别是在需要根据用户操作或后台数据变化更新下拉列表内容时。本文将详细介绍如何使用JavaScript来实现这个功能,并提供示例代码。 ### 一、动态删除...

    下拉列表JS操作

    要向下拉列表中添加新选项,可以使用`options.add()`方法或直接通过`options`数组创建新的`Option`对象: 1. 使用`add()`方法: ```javascript var newOption = new Option(text, value); selectBox.options.add(new...

    浅谈下拉菜单中的Option对象

    在HTML中,`&lt;select&gt;` 标签用于创建下拉列表,而 `Option` 对象则是用来创建和操作下拉菜单中的各个选项。本文将深入探讨 `Option` 对象的创建、`options` 属性的使用以及如何对下拉菜单进行操作。 1. 创建 `Option...

    HTML select option基础理解及使用

    4. 在JavaScript函数中,可以通过操作select元素的options数组来实现对下拉列表的动态控制,如添加新选项、删除选项、更改选中项等。 通过以上内容,我们可以看到,理解和掌握select和option元素的使用对于网页...

    几款极好的 JavaScript 下拉列表插件

    - **动态操作**:通过 JavaScript 动态添加或删除 `&lt;option&gt;`,可以实现动态加载和更新下拉列表内容。 4. **CSS 自定义**: - **Bootstrap 支持**:许多下拉列表插件支持 Bootstrap 框架,可以直接使用预设的样式...

    js select option对象小结

    JavaScript中的select对象是用于操作HTML中的&lt;select&gt;元素,而option对象则用于表示&lt;select&gt;元素内的一个选项。本文将对这两个对象进行详细解释,并涵盖相关的属性和方法,以便读者可以轻松地操作HTML的下拉菜单。 ...

    javascript对下拉列表框(select)的操作实例讲解

    上述提供的JavaScript方法允许开发者根据实际需求,动态地添加、删除、修改下拉列表中的选项,实现更加友好的用户体验。 例如,可以使用全选和反选功能在多选下拉列表中快速操作选项状态,或者在用户在界面上做出...

    javascript为下拉列表动态添加数据项

    通过理解以上知识点,开发者可以灵活地运用JavaScript为网页上的下拉列表添加动态内容,从而增强用户交互体验。无论是动态生成年份选择器、城市列表还是其他任何需要动态选项的下拉菜单,这些技术都可以被广泛应用于...

    JS & JQuery 动态添加 select option

    `&lt;select&gt;`元素作为下拉列表,它的选项`&lt;option&gt;`的动态添加是常见的需求之一。本文将详细介绍如何使用JavaScript(JS)和jQuery两种方式来实现`&lt;select&gt;`元素中的`&lt;option&gt;`选项的动态添加,并探讨它们之间的区别。...

    JQuery给元素添加/删除节点比如select

    接下来,我们来看如何利用 jQuery 添加和删除 `&lt;select&gt;` 的 `&lt;option&gt;` 项: ```javascript jQuery("#select_id").append("&lt;option value='Value'&gt;Text&lt;/option&gt;"); // 为Select追加一个Option(下拉项) jQuery("#...

    Javascript Select操作大集合

    JavaScript中的Select对象是HTML表单元素Select的编程接口,它提供了对下拉列表的操作功能。在Web开发中,Select元素通常用于创建用户可以选择的多个选项。以下是对标题和描述中涉及的知识点的详细说明: 1. **动态...

    无聊的文档

    - `add()`:向下拉列表添加一个新的Option对象。 - `blur()`:使下拉列表失去焦点。 - `focus()`:将焦点设置到下拉列表。 - `remove()`:根据指定索引删除下拉列表中的一个选项。 Select对象的事件句柄: - `...

    js 操作select和option常用代码整理

    在HTML中,`&lt;select&gt;`元素和`&lt;option&gt;`元素常用于创建下拉列表,让用户在多个选项中进行选择。这篇文档主要总结了JavaScript操作`select`和`option`的一些常见代码片段。 1. **获取选中项的值和文本** 当用户选择...

    javascript操作Select标记中options集合

    在JavaScript中,`&lt;select&gt;`元素是用来创建下拉列表的,而`&lt;option&gt;`标签则用于定义下拉列表中的选项。这篇博客“javascript操作Select标记中options集合”深入探讨了如何利用JavaScript动态地管理和操作这些选项。...

Global site tag (gtag.js) - Google Analytics