`
lym6520
  • 浏览: 704243 次
  • 性别: Icon_minigender_1
  • 来自: 福建
社区版块
存档分类
最新评论

select 动态添加option函数

    博客分类:
  • JS
阅读更多
经常会用到select动态添加元素,写了个方法,方便调用!
。。。
/**
 * 功能:select对象动态添加Options项
 * @param {} objSelectNow select对象
 * @param {} txt	显示值text
 * @param {} val	值value
 */
function addOption(objSelectNow, txt, val) {
	// / 使用W3C标准语法为SELECT添加Option
	var objOption = document.createElement("OPTION");
	objOption.text = txt;
	objOption.value = val;
	objSelectNow.options.add(objOption);
}
3
1
分享到:
评论
5 楼 lym6520 2009-02-10  
<select id="ddlResourceType" onchange="getvalue(this)">
</select>

    动态删除select中的所有options:
       document.getElementById("ddlResourceType").options.length=0;

     动态删除select中的某一项option:
       document.getElementById("ddlResourceType").options.remove(indx); 

     动态添加select中的项option:
       document.getElementById("ddlResourceType").options.add(new Option(text,value));

     上面在IE和FireFox都可行,用标准的DOM操作也可以,就是document.createElement,appendChild,removeChild之类的。

获得值:
        obj.options[obj.selectedIndex].value


获取文本:
        obj.options[obj.selectedIndex].text


清空opton:obj.options.length=0;

根据给定的值,选中:

for(var i = 0; i<obj.length; i++){
       if(obj.options[i].value == value){
        obj.options[i].selected = 'selected';     
       }
      }
4 楼 lym6520 2009-01-05  
引用
suko 16 分钟前   回复 删除
支持lz,能分享自己的东西就是很难得的 

谢谢支持!
3 楼 suko 2009-01-05  
支持lz,能分享自己的东西就是很难得的 
2 楼 lym6520 2009-01-05  
我没说大家不会哦,,,
1 楼 lijackly 2009-01-05  
大家都会!

相关推荐

    JS动态添加Select中的Option元素值

    在JavaScript(JS)编程中,动态添加Select中的Option元素值是一项常见的需求,特别是在网页交互或者数据填充时。这里我们将深入探讨如何实现这个功能,并提供一个实际的案例来演示这一过程。 首先,我们要理解HTML...

    向元素中动态添加option

    这篇博客“向&lt;select&gt;元素中动态添加option”探讨的就是如何在JavaScript或jQuery的帮助下,实现在用户界面中动态地向`&lt;select&gt;`元素添加选项。 JavaScript是一种广泛使用的客户端脚本语言,它可以操作HTML元素,...

    layui select动态添加option的实例

    "layui select动态添加option的实例" 本文主要讲解了如何使用 layui 实现select动态添加option的功能。layui是一款轻量级的前端框架,提供了许多实用的组件和功能,select组件是其中的一种,能够实现动态添加option...

    利用js给datalist或select动态添加option选项的方法

    本文将详细介绍如何使用 JavaScript 为 `datalist` 或 `select` 元素动态添加 `option` 选项,这对于创建动态、可自定义的下拉列表或者输入提示至关重要。 首先,让我们解析一下 `datalist` 和 `select` 元素。`...

    js 操作select和option

    接着,通过 `options.add()` 方法向 `&lt;select&gt;` 中添加了一个新的 `&lt;option&gt;` 元素。需要注意的是,`new Option()` 构造函数的第一个参数是显示的文本,第二个参数是实际提交的值。 #### 3. 删除所有 Option 项 ``...

    JavaScript实现select添加option

    在前端开发中,经常需要使用JavaScript对HTML页面中的select元素进行操作,其中最常见的操作之一就是向select元素中动态添加option元素。本篇内容就将详细介绍使用JavaScript如何为select元素添加option,并提供实际...

    javascript_select_option_操作详解.txt

    在这个函数中,我们通过检查 `selectElement` 对象的 `selectedIndex` 属性来判断是否有选中的 `&lt;option&gt;`。如果 `selectedIndex` 大于 `-1`,则表示有选中的项。 #### 二、动态创建 `&lt;select&gt;` 元素 有时我们需要...

    Q694264 C# ajax读取后台接口,填充给select下拉框

    $select.append('&lt;option value="' + option.value + '"&gt;' + option.text + '&lt;/option&gt;'); }); } ``` 3. **处理响应**: 在`success`回调函数中,我们接收到了从服务器返回的数据,并调用`populateSelect`函数...

    jquery动态添加option示例

    在本文中,我们将深入探讨如何使用jQuery动态添加和移除`&lt;option&gt;`元素,这些元素常用于下拉选择列表(`&lt;select&gt;`元素)中。 ### 一、动态添加`&lt;option&gt;`元素 在HTML中,`&lt;option&gt;`元素用于在`&lt;select&gt;`下拉列表中...

    JS更改select内option属性的方法

    通过JavaScript可以动态地对select元素内的option属性进行更改,实现更加动态和丰富的用户交互体验。本文详细介绍了如何使用JavaScript更改select元素内option的属性,包括更改选项文本、值等,并提供了一个实例来...

    select下拉框添加搜索功能

    这通常涉及到DOM操作,包括获取`select`元素、遍历其所有`option`子元素,然后根据输入的关键词进行匹配,显示或隐藏匹配的选项。这种方式需要对HTML、CSS和JavaScript有较深入的理解,并且工作量相对较大。 2. **...

    IE6中select标签的option不能disabled的解决方案

    在早期的Internet Explorer 6(简称IE6)浏览器中,存在一个众所周知的兼容性问题:`&lt;select&gt;`标签内的`&lt;option&gt;`元素无法正确地应用`disabled`属性。这个问题使得开发者无法在IE6中实现禁用某些选项的功能,这对于...

    java Script ,jquery 写的 select 中的option 左右移动,上下移动

    这涉及到从一个`&lt;select&gt;`中移除元素并将其添加到另一个`&lt;select&gt;`: ```javascript $("#moveLeft").on("click", function() { var selectedOption = $("#leftSelect option:selected"); if (selectedOption....

    用jquery获取select标签中选中的option值及文本的示例

    - 方法一:通过id选择器获取select标签,然后使用":selected"伪类选择器找到当前选中的option,接着使用.text()方法获取选中的option的文本内容。代码为`$("#sel option:selected").text();` - 方法二:通过id选择...

    页select中如何实现选择option其中一个选项,显示相关的内容

    - 创建一个`&lt;select&gt;`元素,并为其添加多个`&lt;option&gt;`元素,每个`&lt;option&gt;`的`value`属性值对应新闻标题。 - 在页面上创建一个`&lt;div&gt;`元素,用作显示新闻内容的容器。 2. **CSS样式设置**: - 通过CSS将`&lt;div&gt;`...

    layui动态渲染生成select的option值方法

    本文档将详细阐述如何使用layui框架,结合jQuery和Ajax技术,动态渲染生成select下拉列表中的option选项值的方法。 首先,我们需要了解layui框架。layui是一个前端UI框架,它为开发者提供了一系列的组件,其中就...

    jquery 美化select 自定义函数

    同时,我们需要确保在动态修改`select`时同步更新自定义元素。 例如,增加新选项: ```javascript function addOption(selectIndex, optionText, optionValue) { var $select = $('select:eq(' + selectIndex + '...

    处理html 控件select的js函数

    本js文件——`selectDeal.js`显然专注于提供对`&lt;select&gt;`控件进行各种操作的函数。 1. **获取和设置选中项** JavaScript中的`document.getElementById`方法可以用来获取指定ID的`&lt;select&gt;`元素。然后,我们可以...

    jquery Ajax实现Select动态添加数据

    在本案例中,我们将深入探讨如何使用jQuery和Ajax技术来实现在Select元素中动态添加数据,这通常用于实现交互式的用户界面,如联动下拉菜单。 首先,背景情况是这样的:传统的Select元素通常在页面加载时就包含了...

    AngularJS实现动态添加Option的方法

    在本文中,我们将深入探讨如何使用AngularJS实现动态添加Option到HTML下拉列表(Select)的方法。AngularJS是一个强大的前端框架,它提供了数据绑定、依赖注入以及指令等特性,使得动态操作DOM元素变得简单易行。...

Global site tag (gtag.js) - Google Analytics