`
cxy020
  • 浏览: 63560 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

动态添加select option

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

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

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

       }

       sid.options[sid.options.length]=new Option("1","2");   // 在最后一个值后面添加多一个



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

分享到:
评论

相关推荐

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

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

    JS & JQuery 动态添加 select option

    ### JS & JQuery 动态添加 select option 知识点总结 #### 1. JavaScript 动态添加 option JavaScript中动态添加option到select元素主要使用`document.getElementById`获取select元素,然后利用其`options`属性...

    JS动态添加option和删除option(附实例代码)

    1.动态创建select 代码如下: function createSelect(){ var mySelect = document.createElement(“select”); mySelect.id = “mySelect”; document.body.appendChild(mySelect); } 2.添加选项option 代码如下: ...

    js实现动态生成select中的option

    在JavaScript编程中,动态生成`select`元素中的`option`是一项常见的需求,特别是在网页交互或者数据展示时。本文将深入探讨如何使用JavaScript实现这一功能,同时结合提供的`autoSelect.html`和`autoselect.txt`...

    向元素中动态添加option

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

    select option带自定义图片

    以下是一个关于如何在`&lt;select&gt;`和`&lt;option&gt;`中添加自定义图片的详细教程。 首先,我们需要理解HTML基础。`&lt;select&gt;`元素创建一个可选列表,用户可以选择其中的一个或多个选项。`&lt;option&gt;`元素定义了下拉列表中的一...

    JS 通过系统时间限定动态添加 select option的实例代码

    在JavaScript中,动态地向`&lt;select&gt;`元素添加`&lt;option&gt;`是常见的需求,尤其是在创建交互式表单或实现特定功能时。这个实例代码展示了一种根据系统当前时间和条件来决定是否添加特定选项的方法。下面将详细解释这个...

    layui select动态添加option的实例

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

    动态给select添加option失败的问题原因及解决

    做作业的时候需要给给一个select标签动态添加option,但却总是不成功,刚开始我是这样写的: $(#day).options.append(new Option(i,i)); 然后发现并没有变化,查资料后才发现,如果要用jQuery给select标签动态添加...

    4、Webdynpro入门之Select-Option【原创】

    总结来说,本文详细讲解了 Select-Option 在 Webdynpro 中的应用,包括如何新建组件、添加 Select-Option 组件、建立局部节点、设置 Table 控件的 ID、绑定节点、添加 Attributes 和使用 Methods 等内容。

    Ant design vue中的a-select在动态给option赋值之后,placeholder失效.pdf

    在实际开发过程中,我们可能会遇到一个常见问题,即当动态地给`a-select`的`option`赋值后,其`placeholder`属性失效,不再显示默认提示文本。这个问题通常出现在数据异步加载的情况下,比如从服务器获取数据并填充...

    jquery获得select option值

    var item = $("select[@name=items] option:selected").text(); ``` 这里使用了`option:selected`选择器来选取当前被选中的`&lt;option&gt;`元素,并通过`.text()`获取其文本内容。 2. **设置默认选中的下拉项**: ``...

    jquery动态添加option

    总结起来,jQuery动态添加`&lt;option&gt;`是通过创建新的`&lt;option&gt;`元素,设置其属性,然后将其添加到`&lt;select&gt;`元素中来实现的。这种方法使得网页的交互性增强,能够根据用户行为或数据变化实时更新下拉列表,极大地提高...

    select option,鼠标移到哪个选向就给出相应的鼠标提示

    总的来说,为"select option"添加鼠标提示功能是提升用户界面友好性的重要手段。通过熟练掌握HTML、CSS和JavaScript,开发者可以创建出更加智能、人性化的网页和应用。同时,不断学习和研究相关的IT资源,如压缩包中...

    javascript_select_option_操作详解.txt

    接下来是向 `&lt;select&gt;` 元素中添加 `&lt;option&gt;` 项的操作。可以使用 `add` 方法或者直接通过修改 `options` 属性来实现: ```javascript function addOption(selectElement, text, value) { var newOption = new ...

    Webdynpro for ABAP中select option 用法

    除了上述基本步骤之外,还可以探索更多高级特性,比如动态生成Select Options、使用多种数据类型等。这些主题可以进一步深化您对Webdynpro for ABAP中Select Options的理解和应用能力。 #### 结论 在Webdynpro for ...

    自定义带图标的select,只需把图标地址写在option的title属性中即可

    这个JS插件就是为了解决这个问题,它扩展了`&lt;select&gt;`的功能,允许我们在`&lt;option&gt;`的`title`属性中插入图标地址,然后在界面上动态渲染这些图标。 接下来,我们要探讨如何使用这个插件。在项目中,首先需要引入...

    JQuery动态添加Select的Option元素实现方法

    如下所示: var selector=$('&lt;select&gt;&lt;/select&gt;...以上这篇JQuery动态添加Select的Option元素实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。

Global site tag (gtag.js) - Google Analytics