JavaScript去除select重复选项并选中当前选项
"该资源提供了一个JavaScript函数,用于在`select`标签中删除重复的`option`元素,并确保已选中的`option`仍然被选中。这个函数名为`onePage`,接受一个参数`page`,该参数是`select`元素的ID。函数首先获取所有`option`的文本内容,然后通过比较这些文本来消除重复项,最后重新构建`select`元素,保留未重复的`option`,并恢复之前选中的选项。" 在网页开发中,`select`元素常用于创建下拉列表,而`option`元素则表示列表中的可选项。当`select`中有多个具有相同文本的`option`时,这可能会导致不必要的混乱或错误。本代码片段提供了一种解决方案,用于清理重复的`option`,同时保持用户选择的选项不变。 1. **获取并存储`option`值**:函数首先通过`document.getElementsByTagName("option")`获取所有`option`元素,并创建一个新的数组`array`,将每个`option`的`innerText`(即可见文本)存储其中。 2. **去除重复项**:使用一个对象`data`来检测并移除重复的`option`文本。遍历`array`,将每个`option`文本作为键存入`data`,键值与键相同。这样,如果有重复的`option`,它们的文本会覆盖之前的键值。然后,遍历`data`,将非重复的键(即`option`文本)存入`desiredArr`。 3. **清除`select`元素**:找到具有指定ID的`select`元素(通过`getElementById`),然后遍历其`childNodes`并逐个移除,确保清空`select`。 4. **恢复选中状态并重建`select`**:创建一个新的`option`元素`div_view`,设置其`innerText`为`onePage`的值(即传入的参数,可能是当前选中的`option`文本),然后将其添加回`select`。接着,遍历`desiredArr`,对于每个非重复的`option`文本,创建一个新的`option`元素并添加到`select`中。如果`option`文本与`onePage`相同(即当前选中的选项),则跳过,否则添加到`select`。 这个`onePage`函数在处理动态数据或者存在多条重复数据的下拉列表时非常有用,可以确保用户的选择不会因为后台数据的更新而丢失。同时,它简化了`select`元素的维护,使其保持唯一且有效的选项。
function onePage(page) {
var onePage = document.getElementById(page).value;
//(1)将所有option内容保存
var temp = document.getElementsByTagName("option");
var array = new Array(temp.length);
for (var i = 0, length = temp.length; i < length; i++) {
array[i] = temp[i].innerText;
}
//(2)将所有相同的option内容去掉
var data = {};
var desiredArr = new Array();
for (var i = 0; i < array.length; i++) {
data[array[i]] = array[i];
}
for ( var pro in data) {
desiredArr.push(data[pro]);
}
//(3)删掉所有子节点
var parent = document.getElementById(page);
//这里因为childNodes节点会动态变下标,所以用0的index实现全部删除
for (var i = 0, length = parent.childNodes.length; i < length; i++) {
parent.removeChild(parent.childNodes[0]);
}
//选中当前的显示数
var div_view = document.createElement("option");
var text = document.getElementById(page);
下载后可阅读完整内容,剩余1页未读,立即下载
- 粉丝: 4
- 资源: 23
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 李兴华Java基础教程:从入门到精通
- U盘与硬盘启动安装教程:从菜鸟到专家
- C++面试宝典:动态内存管理与继承解析
- C++ STL源码深度解析:专家级剖析与关键技术
- C/C++调用DOS命令实战指南
- 神经网络补偿的多传感器航迹融合技术
- GIS中的大地坐标系与椭球体解析
- 海思Hi3515 H.264编解码处理器用户手册
- Oracle基础练习题与解答
- 谷歌地球3D建筑筛选新流程详解
- CFO与CIO携手:数据管理与企业增值的战略
- Eclipse IDE基础教程:从入门到精通
- Shell脚本专家宝典:全面学习与资源指南
- Tomcat安装指南:附带JDK配置步骤
- NA3003A电子水准仪数据格式解析与转换研究
- 自动化专业英语词汇精华:必备术语集锦