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

dom操作中select的动态创建

阅读更多
之前写过好几种,但今天发现不太兼容:

最后兼容采用的:
$('ele_select')options.add(new Option(text,value)); 
之前使用过的:
var $op = new Option(text,value)); 
$select.options[] = $op;
#也可以直接:$select.options[] = new Option( s.field_1,s.field_2 );
#但这个在ie下不显示text
 

另一种:
var   $op       =   document.createElement("OPTION");
$op.innerText   =   text;   //ie下显示正常
$op.text        =   text;   //ff下显示正常
$op.value       =   value;   
 



总结一下:
#创建
var   $op       =   document.createElement("OPTION");
var   $op_2     =   new Option(text,value); 
#加到原来的里面去
$select.options[]  = $op;
$select.options.add($op);
 


直接插入html代码也是ok的,不过,ie下好像不行。
    $.each( op_list, function(i, n){
        $("#select").append("<option value='"+i+"'>"+n+"</option>"); 
    }); 
#jquery确实很优美
 
分享到:
评论

相关推荐

    Jquery 操作 Dom 标签 select

    ### Jquery 操作 Dom 标签 Select 在前端开发中,使用 jQuery 操作 DOM 元素是非常常见的需求之一。特别是对于表单元素如 `select`、`radio` 和 `checkbox` 的操作,更是频繁出现。下面我们将详细介绍如何使用 ...

    Html dom中的select, option_ 级联下拉列表

    在HTML DOM中操作select和option时,可以使用诸如document.getElementById获取select元素,再利用add方法来添加option元素。 此外,创建元素时还需注意元素的样式如何被定义。在文中提到,要修改的样式必须是内联...

    js_HTML_Dom操作练习

    9. **表单操作**:DOM也允许我们处理表单元素,如`&lt;input&gt;`, `&lt;select&gt;`, `&lt;textarea&gt;`等。可以使用`element.value`获取或设置输入值,`element.checked`控制复选框或单选按钮的状态。 10. **动画与定时器**:结合`...

    jQuery为动态生成的select元素添加事件的方法

    接着,通过`getVoucherGroupData`函数发起Ajax请求获取数据,并动态创建select元素的HTML内容。这里的关键是`getVoucherGroupData`函数中使用的`.html()`方法,它负责将生成的select元素的HTML添加到`...

    js实现动态生成select中的option

    在JavaScript中,我们可以通过DOM操作来创建和添加`option`元素。首先,我们需要一个数组来存储下拉列表的数据,这些数据可以是字符串,也可以是对象,取决于我们的具体需求。 以下是一个基本的步骤: 1. **准备...

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

    以下是一个简单的示例,展示了如何使用JavaScript动态创建并添加Option元素到Select中: ```html &lt;!DOCTYPE html&gt; 动态添加Option &lt;select id="select1"&gt;&lt;/select&gt; &lt;select id="select2"&gt;&lt;/select&gt; // ...

    向元素中动态添加option

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

    vue+layui实现select动态加载后台数据的例子

    标题中提到的关键技术点是“vue+layui实现select动态加载后台数据”,这个知识点涉及了前后端数据交互、前端框架Vue.js以及前端UI组件库Layui的使用。接下来将详细解析标题和内容中涉及的关键知识点。 ### Vue.js ...

    [转]Jquery操作select 收藏

    在jQuery中操作select,我们可以执行以下常见任务: 1. **获取和设置选中项**:使用`.val()`方法,可以获取或设置select的当前选中项的值。如`$('select').val()`返回选中项的值,`$('select').val('newValue')`则...

    jquery 动态遍历select 赋值的实例

    回调函数中的data参数包含了从服务器返回的数据,可以用来更新DOM元素,例如遍历data数组,并创建新的option元素填充到select中。 知识点四:创建新的DOM元素 在回调函数中,使用$("&lt;option/&gt;").text(item.name)....

    Web程序开发:第15章 DOM操作.pdf

    表单元素如、、&lt;select&gt;等可以通过DOM接口进行操作,例如获取用户输入,验证数据,或动态创建和修改表单组件。 15.6 BOM(浏览器对象) BOM提供了与浏览器交互的能力,例如窗口大小调整、导航历史管理、页面位置...

    基于jquery的关于动态创建DOM元素的问题

    在JavaScript和jQuery的世界里,动态创建DOM元素是常见的需求,特别是在构建交互丰富的Web应用时。然而,不恰当的实现方式可能会导致性能问题和兼容性挑战。让我们深入探讨基于jQuery的动态创建DOM元素的最佳实践。 ...

    Angular中Dom操作 以及表单( input、checkbox、radio、select、 textarea )结合双休数据绑定实现在线预约功能

    在Angular框架中,DOM操作和表单控件的使用是构建动态Web应用的关键部分。本文将深入探讨如何在Angular环境中进行DOM操作,并结合双向数据绑定,利用input、checkbox、radio、select和textarea等表单元素实现一个...

    select级联框 js json 全动态

    在本案例中,jQuery用于操作DOM元素,监听用户交互,并动态生成HTML结构。 2. **JSON数据**:JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。在级联...

    javascript操作Select标记中options集合

    这篇博客“javascript操作Select标记中options集合”深入探讨了如何利用JavaScript动态地管理和操作这些选项。以下是关于这个主题的一些关键知识点: 1. **DOM操作**:在JavaScript中,我们可以使用DOM(Document ...

    JQuery动态创建DOM、表单元素的实现代码

    在本文中,我们将讨论如何使用JQuery库动态创建DOM元素和表单元素。动态创建DOM元素可以使得我们的网页更加灵活和交互性强,例如可以根据用户的输入动态生成表单元素,从而提高用户体验。 一、动态创建DOM元素 在...

    JS中Select下拉列表类(支持输入模糊查询)功能

    4. DOM操作:在JavaScript代码中,需要对DOM元素进行动态创建和更新。创建新的div元素来表示选项,并为每个div元素设置相应的文本和样式。如果用户点击了某个选项,需要更新输入框的值,并隐藏下拉列表。 5. 动态...

    Javascript Select操作大集合

    JavaScript中的Select对象是HTML表单元素...了解这些基本操作对于在JavaScript中处理Select元素至关重要,特别是在动态创建和更新表单、实现交互式用户界面时。熟练掌握这些技术,可以提升Web应用的用户体验和功能性。

    select下拉列表显示图片内容

    然后在JavaScript中解析这些数据,动态创建包含图片的DOM元素。 4. **jQuery实现**: 描述中的`$("#***").select()`可能是引用了jQuery的`select`方法,但这在jQuery中并不存在。可能是指使用jQuery来操作`select`...

Global site tag (gtag.js) - Google Analytics