以下是我的代码，不能删除所有option项，但是我好像又没有错
<html>
<head>
<script>
var op1=new Array("豫园","长风公园");
var op2=new Array("故宫","颐和园");
function ss()
{
var ctrl1=document.getElementById("sel1");
var ctrl2=document.getElementById("sel2");
var gtext=ctrl1.options[ctrl1.selectedIndex].text;
if(gtext=="上海")
{
var op=op1;
}
else if(gtext=="北京")
{
var op=op2;
}
alert(ctrl2.options.length);
for(var i=0;i<ctrl2.options.length;i++)
{
ctrl2.removeChild(ctrl2.options[i]);
}
for(var i=0;i<op.length;i++)
{
var opt=document.createElement("option");
var textnode=document.createTextNode(op[i]);
opt.appendChild(textnode);
ctrl2.appendChild(opt);
}
}
</script>
</head>
<body>
<select id="sel1" onchange="ss()">
<option>上海</option>
<option>北京</option>
</select>
<select id="sel2">
</select>
</body>
</html>
for(var i=0;i<ctrl2.options.length;i++)
{
ctrl2.removeChild(ctrl2.options[i]);
}
这一句，你取得是ctrl2.options.length，当你删除一项的时候，这个数值减一，所以不可能完全删除。
在此基础上的修改是：
for(var i=0;i<ctrl2.options.length;)
{
ctrl2.removeChild(ctrl2.options[i]);
}
分享到：
相关推荐
在Ant Design Vue中，`a-select`组件是一个用于选择项的下拉框，它提供了丰富的交互和样式。在实际开发过程中，我们可能会遇到一个常见问题，即当动态地给`a-select`的`option`赋值后，其`placeholder`属性失效，...
复制代码代码如下: document.getElementById(“selectid”).options.length = 0; 方法二 复制代码代码如下: document.formName.selectName.options.length = 0; 方法三 复制代码代码如下: document....
4. **搜索结果清空**：添加一个清空按钮，允许用户快速清除搜索结果并恢复所有选项。 5. **回车触发选择**：用户按下回车键时，选中当前高亮的搜索结果。 6. **搜索提示**：提供友好的提示信息，如“请输入搜索...
**功能描述：** 清除`<select>`元素中所有被选中的`<option>`元素。 **代码实现：** ```javascript function jsRemoveSelectedItemFromSelect(objSelect) { var length = objSelect.options.length - 1; for (var...
5. 事件监听：通过AngularJS的事件机制，开发者可以监听Select2的各种交互事件，如选中、清除等，实现更丰富的业务逻辑。 6. 国际化支持：Angular-Select2兼容Select2的多语言设置，方便不同地区的用户使用。 安装...
选择适当的选项，点击“Find Orphaned Options” --->进入“To double-check options in the Orphaned Options list”页面--->单击下方的“Select All“ ，选择页面中的内容---->点击”View Selected Options ...
本文主要讨论的是一个针对JQuery在Internet Explorer 8（IE8）的兼容性视图模式下操作Select元素的Options时遇到的bug，以及如何解决这个问题。这个问题涉及到前端开发中的DOM操作和浏览器差异性。 在IE8兼容性视图...
while (select.options.length > 0) { select.remove(0); } // 添加新选项 for (var i = 0; i ; i++) { var option = document.createElement('option'); option.text = optionsArray[i].text; option.value...
在网页开发过程中，经常需要对页面中的元素进行动态操作，比如清除`<select>`下拉列表中的选项。本文将详细介绍如何使用JavaScript实现`select`清零，并深入探讨相关的知识点。 ### 一、基本概念 #### 1.1 `...
在使用element-ui开发Web项目时，经常会遇到一些组件使用上的细节问题，其中element-ui中的下拉多选框组件el-select使用时，如何设置默认值且不可删除，是一个较为常见的需求。本文将详细介绍如何解决这个问题，以及...
在实际使用中，React Simple Select提供了丰富的API和事件，允许开发者监听用户交互，如选择、清除、打开或关闭下拉列表等。这些事件回调可以用于更新应用程序的状态，实现更复杂的业务逻辑。 安装React Simple ...
本文将探讨如何利用JavaScript和Java中的HashMap（在JavaScript中，我们可以使用类似的数据结构，如`Map`）来消除`<select>`中的重复值。 首先，让我们了解HashMap或Map数据结构。HashMap是Java中的一种集合类，它...
对于更复杂的需求，如异步加载选项、自定义清除按钮、分页等，React Select 提供了相应的API和示例代码，开发者可以参考官方文档进行深入学习。 总结，React Select 是一个强大且灵活的前端选择组件，它为React开发...
本文将详细讲解如何使用jQuery来管理HTML中的`<select>`元素，包括选择、更改选项，获取选中项的文本、值和索引，以及清除、删除和添加选项。 首先，要进行jQuery操作，需要在HTML文档中引入jQuery库。在这个例子中...
这时，jQuery插件Chosen应运而生，它是一款强大的、高度可定制的Select控件，能够提供多选、搜索、清除等功能，极大地提升了用户体验。 Chosen插件的核心特性包括： 1. **多选支持**：Chosen允许用户选择多个选项...
这段代码通过`getElementById`方法获取到指定ID的`select`元素，然后设置其`options.length`为0，从而清除所有选项。 ### 添加或修改选项 ```javascript obj.options[index] = new Option("three", 3); ``` 这里...
var options = selectElement.options; ``` 这将返回一个`HTMLOptionsCollection`对象，你可以通过索引来访问或操作每个`<option>`元素。 2. 删除`option` 删除`<option>`元素，你可以将某个选项对象设置为`...
配置参数可以通过`options`对象传递给`searchSelect`方法，如： ```javascript $('select').searchSelect({ placeholder: '请输入关键词', minChars: 1, showNoResults: true }); ``` **四、事件处理** 插件...
在本文中，我们将深入探讨如何使用jQuery来获取、设置和清除`<select>`选择框的文本、值以及选项。 首先，我们来看如何获取`<select>`的选择信息： 1. **获取选中文本**：`$("#ddlregtype").find("option:selected...
通过`options`参数，你可以定制插件的诸多配置，如是否开启搜索、是否显示清除按钮、分隔符、默认值、禁用状态等。这些配置可以满足不同场景下的使用需求。 9. **兼容性**： 虽然layui框架和xm-select插件设计时...