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

关于select 添加 删除 option 的兼容性问题

阅读更多

很多朋友习惯用oSelect.options[n].remove()这样的方法来删除下拉框内的选项,而且这样在IE里也能很好的使用,但是很不幸的 是这个不是标准方法,是微软的IE实现的一个方法,在firefox等其他浏览器里就不能被支持。标准的方法是把 oSelect.options.length值改变来删除options,但是这样的话就不好灵活的删除某一个option了,不过还是有变通的办法, 就在删除前把要删除的option移动到最后一个,然后把整体的options.length --,就达到目的了,讲到这个偶有想起了数据结构那门课。

对了,补充一点,options.add方法也不是标准方法,所以添加option用oSelect.options[oSelect.length] = option;这样的方法来添加才是跨浏览器的方法。

 

 

function delete(){
    var sel=$("#language").get(0);
    var opts=sel.options;
    alert($.browser.msie);
    if($.browser.mozilla){
        sel.remove(2);
    }else{
        opts.remove(2);
    }
    alert('ddd');
    $("#language").combobox({width:150,rebuild:true});
    return false;
}
function add(){
    //$("#language").append($('<option value="Deutsch" >Deutsch</option>'));
    //var newElem = document.createElement("OPTION");
    //newElem.text = "Freddy";
    //newElem.value = "Freddy Mercury";
    //document.getElementById('language').options.add(newElem);
    //$("#language").get(0).options.add(newElem);
    var opts=$("#language").get(0).options;
    opts[opts.length]=new Option('Freddy Mercury','Freddy');
    $("#language").combobox({width:150,rebuild:true});
    return false;
}

分享到:
评论

相关推荐

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

    在JavaScript中,`select`元素是HTML中用于创建下拉列表的标签,而`option`则是下拉列表中的选项。...在实际开发中,可能还需要考虑到不同浏览器的兼容性问题,以及使用事件监听等方法来响应用户的操作。

    删除元素标签 并在之和添加一个select标签_123

    在网页开发中,元素操作是常见的任务之一,包括删除元素标签和添加新的元素。...在实际应用中,确保根据项目的具体需求进行调整,并考虑到兼容性问题,因为不同的浏览器可能对某些API有不同的支持程度。

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

    9. **添加选项的兼容性问题** 在不同浏览器中,添加`option`的方法可能不同。`add`方法在IE中有效,而在Firefox等其他浏览器中,应使用`options.add`。 10. **删除所有选项、删除单个选项** 可以通过`options....

    使用js对select动态添加和删除OPTION示例代码

    **兼容性问题:** 需要注意的是,虽然上述代码在IE和Firefox等浏览器中测试成功,但不同的浏览器可能对某些DOM操作有不同的实现。为了确保跨浏览器的兼容性,可以使用DOM操作方法如`document.createElement`、`...

    javascript操作Select标记中options集合

    9. **浏览器兼容性**:博客中提到的`select_Option(这个支持FF).html`可能是指该示例在Firefox浏览器上已测试通过,但需要注意其他浏览器如IE、Chrome、Safari等的兼容性问题。 通过这些知识点,开发者可以有效地...

    javascript对select标签的控制(option选项/select)

    在编写 JavaScript 代码时,需要注意不同浏览器可能存在的兼容性问题。例如,`add` 和 `remove` 方法在 Internet Explorer 和 Firefox 中的用法不同。为了确保代码在各浏览器中都能正常工作,可以使用 `obj.options....

    option属性的js事件浏览器差异

    添加或删除`option`元素时,确保使用`appendChild`、`insertBefore`、`removeChild`等标准DOM操作方法,而不是依赖于特定浏览器的实现。 总之,处理`option`属性的JS事件时,应始终考虑浏览器兼容性和事件处理的...

    一个select下拉的js脚本

    除了JavaScript操作,还可以使用CSS来改变`select`的样式,但需要注意浏览器兼容性问题,某些样式在不同的浏览器中可能表现不同。 9. 使用第三方库优化: 如果需要更复杂的交互效果,可以考虑使用jQuery、Vue.js...

    设置select

    例如,在清空包含数千个选项的下拉列表时,使用`innerHTML`可能更快,因为不需要触发每个`&lt;option&gt;`的删除事件。 ```javascript document.getElementById('largeSelect').innerHTML = ''; ``` #### 3.3 事件处理 ...

    jquery 超级select插件 v4.0版本

    考虑到实际项目中可能面临的浏览器兼容性问题,jQuery超级Select插件v4.0版本致力于兼容主流的现代浏览器,同时也尽可能对旧版浏览器提供支持。此外,它在性能上做了优化,如延迟初始化、虚拟DOM技术等,以确保在大...

    JavaScript关于select的相关操作说明

    这个方法简单明了,但需要注意不同浏览器之间的兼容性问题。 #### 二、清空option 有时候需要清空`&lt;select&gt;`元素中的所有选项,这可以通过修改`options`属性实现。 ```javascript var oSelectMonth = document....

    jQuery select操作控制方法小结

    在现代网页设计中,JavaScript库jQuery极大地方便...需要注意的是,对于不同的jQuery版本,可能存在兼容性问题,因此建议在实施前进行相应的测试。通过收藏本文,即使是记忆力不佳的开发者也能快速查找并应用这些方法。

    Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]

    以下是一些基本的方法,涵盖了从新增...在编写这些函数时,需要注意兼容性问题,确保在不同的浏览器环境中都能正常工作。同时,对于用户交互,应该提供适当的反馈,比如使用alert或者更优雅的UI提示,以提高用户体验。

    combox实现的可编辑下拉框

    兼容性和扩展性 确保代码兼容各种主流浏览器,包括IE、Firefox、Chrome等。同时,可以考虑将这个组件封装成一个自定义元素或者库,方便在不同项目中复用,并提供配置选项以适应不同的需求。 总之,通过JavaScript...

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

    在开发web页面时,下拉列表框(SELECT元素)是经常被使用的表单元素之一,它允许用户从预定义的选项中选择一项或多项。...在设计此类功能时,要考虑到易用性、兼容性和性能等问题,以确保最终的用户体验。

    下拉列表

    下拉列表,也被称为下拉菜单或选择框,是用户界面设计中常见的一种元素,用于在有限的空间内显示多个选项供用户选择。...开发者需要考虑用户体验、功能需求以及兼容性等因素,以创建高效且易于使用的下拉列表。

    html+css教程.pdf

    - 遍历DOM节点的方法包括`parentNode`、`previousSibling`、`nextSibling`、`childNodes`等,但因浏览器兼容性问题,不推荐直接使用。可以考虑使用jQuery或其他DOM库来优化这部分代码。 2. 表单验证: - 表单验证...

    javascript中select下拉框的用法总结

    - **跨浏览器兼容性**:在不同的浏览器中,JavaScript的某些API可能有不同的行为。例如,`event`对象在IE和非IE浏览器中获取方式不同,上面的例子中已经处理了这个问题。 - **异步加载数据**:通常,下拉框的数据是...

    jquery Firefox3.5中操作select的问题

    这里出现的问题集中在获取选中选项的值在Firefox 3.5版本中的兼容性差异上。通常,开发者会使用不同的选择器来获取选中项,但并非所有选择器在所有浏览器中都表现一致。 首先,让我们来看看两种获取选中值的方法: ...

    JavaScript实现下拉列表框数据增加、删除、上下排序的方法

    10. 跨浏览器兼容性:虽然文档没有提及,但实际在编写涉及DOM操作的JavaScript代码时,需要考虑到不同浏览器之间可能会存在的兼容性问题,编写时应尽量使用标准的DOM方法和属性。 通过掌握上述知识点,开发者可以...

Global site tag (gtag.js) - Google Analytics