`
nakupanda
  • 浏览: 416619 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

使用javascript操作多选select框时遇到的问题

阅读更多
假设有一个多选框:
<select id="select1" multiple="multiple">
     <option>HELLO1</option>
     <option>HELLO2</option>
     <option>HELLO3</option>
     ......
     ......
     <option>HELLO1000</option>
</select>


现在我有2个javascript函数,用于移除所有选中的选项,我觉得他们的效果应该一样的:
	//顺序遍历
	function removeSelectedASC()
	{
		obj = document.getElementById('select1');
		for(var i=0;i<obj.length;i++)
		{
			if(obj.options[i].selected)
				obj.remove(i);
		}
	}

	//倒序遍历	
	function removeSelectedDESC()
	{
		obj = document.getElementById('select1');
		for(var i=obj.length-1;i>=0;i--)
		{
			if(obj.options[i].selected)
				obj.remove(i);
		}
	}



但结果是,顺序遍历函数只能移除一半被选中的选项,而倒序遍历函数则使用正常,为什么?
分享到:
评论

相关推荐

    多选select组件 涉及的所有常用操作

    在前端开发中,多选select组件是经常遇到的一种交互元素,用于实现用户可以选择多个选项的功能。本篇文章将探讨“多选select组件涉及的所有常用操作”,并结合提供的`mulSelectOperator.js`文件,来深入理解其背后的...

    jsp select 带多选框

    在这个特定的场景中,"jsp select 带多选框"指的是在JSP中使用HTML的`&lt;select&gt;`元素创建一个多选下拉框。这种功能在用户界面设计中很常见,允许用户同时选择多个选项。 HTML的`&lt;select&gt;`元素默认只支持单选,但通过...

    解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题

    在使用element-ui开发Web项目时,经常会遇到一些组件使用上的细节问题,其中element-ui中的下拉多选框组件el-select使用时,如何设置默认值且不可删除,是一个较为常见的需求。本文将详细介绍如何解决这个问题,以及...

    jQueryMultipleSelect实现下拉框多选

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和动画效果。而"jQuery Multiple Select"则是jQuery的一个插件,专门用于实现下拉框的多选功能,使得用户可以在下拉菜单中选择...

    Element-ui中 选择器(select)多选下拉框实现全选功能.zip

    在Element-UI中,`&lt;el-select&gt;`组件用于创建一个下拉选择框,通过`multiple`属性可以将其设置为多选模式。以下是一个基本的多选下拉框示例: ```html &lt;el-select v-model="value" multiple placeholder="请选择"&gt; ...

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

    在开发web页面时,下拉列表框(SELECT元素)是经常被使用的表单元素之一,它允许用户从预定义的选项中选择一项或多项。在实际应用中,我们可能会遇到需要对SELECT下拉列表进行复杂操作的情况,比如实现多选、移除或...

    chosen(下拉框多选)

    最后,在页面加载完成后,使用jQuery的`$(document).ready`函数来初始化Chosen,这样`&lt;select&gt;`元素就被转换成了可多选、带搜索功能的下拉框。 Chosen库还提供了丰富的配置选项和API,可以自定义其行为,例如设置...

    jsp/html 实现下拉复选框

    在实际开发中,可能会遇到的问题包括:样式兼容性(尤其是跨浏览器)、选项过多导致的滚动问题、以及如何通过JavaScript优雅地处理用户的选择等。解决这些问题通常需要对HTML、CSS和JavaScript有深入的理解,并可能...

    mobileSelect移动端手机下拉控件

    在实际使用mobileSelect时,开发者通常会遇到以下几个关键步骤: 1. **引入库**:在项目中添加mobileSelect的相关库文件,确保运行环境支持该组件。 2. **初始化控件**:在HTML或者对应的视图模板中创建mobile...

    javascript+css 下拉多选框插件

    通常,它可能包含一个JavaScript文件(如`multipleSelect.js`),用于实现多选框的功能,以及一个CSS文件(如`multipleSelect.css`),用于设定样式。 在JavaScript部分,我们可能会遇到以下关键概念: 1. DOM操作...

    jQuery实现的select下拉框多选菜单效果插件.zip

    尽管我们无法看到具体的文件内容,但通常这样的插件会包括一个或多个JavaScript文件,它们实现了将原生的Select元素转换为一个多选菜单的逻辑。可能还会有CSS文件用于定义样式,使得菜单看起来更加美观。此外,如果...

    select2一个很强大的下拉提示

    6. **社区与文档:** Select2有一个活跃的社区,遇到问题可以参考官方文档或在线论坛寻求帮助,持续更新的文档提供了详细的使用指南和API参考。 综上所述,Select2是一个强大且灵活的下拉框组件,它的出现极大地...

    jquery实现下拉框多选(支持IE7)

    然而,由于这两个浏览器的JavaScript支持有限,可能会遇到一些特定的兼容性问题,例如CSS3属性的不完全支持。因此,在编写CSS样式时,应尽量避免使用这些浏览器不支持的特性,或者使用条件注释来为这些浏览器提供...

    下拉框搜索多选

    在Angular中,可以使用ng-select或者ng-multiselect-dropdown这样的第三方库来实现下拉框搜索多选。ng-select是一个轻量级且高度可定制的组件,它支持搜索、分组、多选等功能。同样,ng-multiselect-dropdown提供了...

    js日历控件日期多选Kalendajs

    10. **文档和社区支持**:Kalendajs通常会提供详细的文档和社区支持,遇到问题时,查阅官方文档或在社区提问往往是解决问题的有效途径。 综上所述,Kalendajs是一个强大且灵活的JavaScript日历插件,它为开发者提供...

    Layui实现下拉多选

    在IT行业中,前端开发经常会遇到用户界面交互的需求,如下拉多选,这可以提高用户的操作效率和体验。Layui是一个流行的JavaScript框架,它提供了丰富的UI组件,其中包括下拉多选的功能。本篇文章将详细讲解如何使用...

    模拟select带checkbox全选反选取消插件tomcat发布使用

    在IT领域,尤其是在Web开发中,我们经常遇到需要模拟Select控件的情况,特别是在需要多选功能时。这个“模拟select带checkbox全选反选取消插件”是一个专门为了解决这个问题而设计的工具。它允许用户通过复选框...

    多选下拉框

    2. **活跃度与支持**:活跃的社区可以提供及时的技术支持和更新,解决遇到的问题。 3. **兼容性**:优秀的开源组件通常考虑了多种浏览器和设备的兼容性。 4. **可扩展性**:通过API和插件机制,可以方便地扩展组件...

    下拉框的选项中添加搜索框

    开发者还可以监听`select2:select`事件,以便在用户选择一个选项时执行特定操作。 6. **自定义样式和行为**:Select2允许你通过CSS进行样式定制,也可以通过API扩展其功能,如添加新选项、禁用选项等。 7. **兼容...

    Jquery下拉多选

    本篇文章将详细讲解如何在jQuery中实现下拉多选功能,以及相关的源码分析和可能使用的工具。 首先,下拉多选通常指的是一个下拉列表(Dropdown)中支持用户选择多个选项的功能。在HTML中,我们通常使用`&lt;select&gt;`...

Global site tag (gtag.js) - Google Analytics