`
zousy999
  • 浏览: 19400 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

JS & JQuery 动态添加 option

 
阅读更多
js
var selid = document.getElementById("sltid");

       for(var i=0; i<10;i++){     //循环添加多个值

              sid.options[i] = new Option(i,i);

       }

 

jQuery
$("#selectId").append("<option value='"+value+"'>"+text+"</option>");

当然除了这句,还有设置默认选择值、第一个的值、最后一个的值、第N个的值等等的,所以在网上搜了一上:

jQuery获取Select选择的Text和Value: 

1. $("#select_id").change(function(){//code...});   //为Select添加事件,当选择其中一项时触发 

2. var checkText=$("#select_id").find("option:selected").text();  //获取Select选择的Text

3. var checkValue=$("#select_id").val();  //获取Select选择的Value

4. var checkIndex=$("#select_id ").get(0).selectedIndex;  //获取Select选择的索引值

5. var maxIndex=$("#select_id option:last").attr("index");  //获取Select最大的索引值 

  

jQuery添加/删除Select的Option项: 

1. $("#select_id").append("<option value='Value'>Text</option>");  //为Select追加一个Option(下拉项) 

2. $("#select_id").prepend("<option value='0'>请选择</option>");  //为Select插入一个Option(第一个位置)

3. $("#select_id option:last").remove();  //删除Select中索引值最大Option(最后一个)

4. $("#select_id option[index='0']").remove();  //删除Select中索引值为0的Option(第一个)

5. $("#select_id option[value='3']").remove();  //删除Select中Value='3'的Option

5. $("#select_id option[text='4']").remove();  //删除Select中Text='4'的Option 

设置select: 
设置select 选中的索引: 
$("#ddlRegType ").get(0).selectedIndex=index;//index为索引值 
设置select 选中的value: 
$("#ddlRegType ").attr("value","Normal“); 
$("#ddlRegType ").val("Normal"); 
$("#ddlRegType ").get(0).value = value; 
设置select 选中的text: 
var count=$("#ddlRegType option").length; 
for(var i=0;i<count;i++) 
{ if($("#ddlRegType ").get(0).options[i].text == text) 
{ 
$("#ddlRegType ").get(0).options[i].selected = true; 
break; 
} 
} 
清空 Select: 
$("#ddlRegType ").empty(); 

 

分享到:
评论

相关推荐

    JS & JQuery 动态添加 select option

    JavaScript中动态添加option到select元素主要使用`document.getElementById`获取select元素,然后利用其`options`属性以及数组下标进行添加。 - **创建新的option对象**: ```javascript function newOption...

    jquery动态添加option

    本篇文章将深入探讨“jquery动态添加option”这一主题,它涉及到如何在HTML的下拉选择框(`&lt;select&gt;`元素)中动态地添加选项(`&lt;option&gt;`元素)。这种操作在网页交互和数据动态展示中非常常见,例如在用户筛选、数据...

    jquery动态添加option示例

    // 使用jQuery动态添加option $("#selectId").append("&lt;option value='" + value + "'&gt;" + text + "&lt;/option&gt;"); ``` 在jQuery中,我们使用`append()`方法将新的`&lt;option&gt;`元素添加到`&lt;select&gt;`元素的末尾。这里`...

    向元素中动态添加option

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

    jquery动态添加以及遍历option并获取特定样式名称的option方法

    在JavaScript或jQuery中,我们可以动态地向已有`&lt;select&gt;`元素中添加新的`&lt;option&gt;`。在给出的代码中,虽然没有直接展示动态添加的过程,但注释中给出了一个例子: ```javascript //$("#selectId").append("...

    Jquery操作Select option整理

    ### jQuery 操作 Select Option 整理 #### 一、引言 在Web开发中,`&lt;select&gt;`元素...无论是遍历、添加还是移除 `&lt;option&gt;`,还是获取选中的值,jQuery 都能帮助我们轻松完成任务。希望本文档能为你的项目带来帮助!

    jquery获得select option值

    使用jQuery可以方便地创建并添加新的`&lt;option&gt;`元素到下拉列表中。 2. **清空下拉列表的所有选项**: ```javascript $("#sel").empty(); ``` 使用`.empty()`方法可以清空下拉列表的所有选项。 以上就是从给定...

    jQuery联动下拉框 jQuery optionTree

    在联动下拉框的场景中,jQuery可以帮助我们快速响应用户的交互,动态地更新DOM元素,如创建、删除或修改option元素。 optionTree插件是基于jQuery的一个扩展,它的设计目标是构建具有层级结构的联动下拉框。在一些...

    jquery动态创建联动下拉框

    在网页开发中,jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理以及Ajax交互。本主题将深入探讨如何使用jQuery动态创建联动下拉框,这是一个常见的需求,特别是在构建多级选择或依赖性选择菜单时。 ...

    jquery 动态遍历select 赋值的实例

    这是一个非常有用的jQuery方法,可以移除集合中所有匹配元素的子节点,从而确保在添加新的option之前select列表是空的。 以上就是这篇关于"jquery动态遍历select赋值的实例"中涉及的主要知识点。通过本文的介绍和...

    jQuery 操作Option.rar

    总结来说,"jQuery操作Option"的示例着重展示了如何利用jQuery库来增强`select`元素的交互性,提供选项移动的功能,这对于创建动态和用户友好的Web表单非常有用。通过学习这个示例,开发者可以更好地掌握jQuery在...

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

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

    Jquery遍历select option和添加移除option的实现方法

    在这篇文章中,我们将了解到如何使用JQuery来遍历select中的option,并实现添加和移除option的几种方法。 首先,我们来看一下如何遍历select中的option元素。在JQuery中,可以使用选择器来选中一个select元素,然后...

    jquery-option-tree-1.3.

    &lt;script src="path/to/jquery.optiontree.js"&gt; &lt;link rel="stylesheet" href="path/to/jquery.optiontree.css"&gt; ``` 然后,在HTML中创建一个元素作为Option Tree的容器,并使用JavaScript初始化: ```javascript $...

    jquery获得selectoption值[文].pdf

    以下是一些关于如何使用jQuery获取和设置`select`、`option`、`radio`、`checkbox`以及文本输入(`input[type=text]`)等元素的值的关键知识点: 1. **获取选中的`select`值**: ```javascript var item = $(...

    jQuery 操作option的实现代码

    这两种方法都能够达到相同的效果,即根据JSON数据动态创建并添加Option元素。 总结一下,jQuery提供了一套简洁、强大的API来处理DOM操作,包括清空Option元素和动态创建Option元素。在实际应用中,我们可以利用这些...

    jquery 动态select实现

    本篇文章将详细讲解如何利用jQuery实现动态`select`下拉框的功能,这对于创建动态交互式的网页界面至关重要。 首先,我们需要理解`select`元素在HTML中的作用。`&lt;select&gt;`标签用于创建一个下拉列表,用户可以从预设...

    AngularJS实现动态添加Option的方法

    以下是如何利用AngularJS实现动态添加Option的步骤: 首先,我们需要创建一个AngularJS应用模块。在HTML文件中,我们定义了一个名为`myapp`的模块,并在`ng-app`属性中引用它。同时,我们还需要引入AngularJS库和...

Global site tag (gtag.js) - Google Analytics