JS 实现下拉框去重
Posted Yan Yang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS 实现下拉框去重相关的知识，希望对你有一定的参考价值。
学习内容：
需求
用 JS 下拉框去重
实现代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>下拉框去重</title>
<script type="text/javascript" src="/static/jQuery-1.11/jquery-1.11.3.min.js">
</script>
<script>
function distinct() {
// 先获取右边 select 中 option 获取 value 属性值，存到一个数组中
var arr = [];
/** $(selector).each(function(index,element))
* index：遍历元素下标，0 开始
* element：遍历元素的一个变量
*/
$('#s2 > option').each(function(i, domEle){
var val = $(domEle).val();
arr.push(val); // 往数组最后添加一个元素
});
console.log(arr);
// 遍历左边 select 中 option 获取其 value 值，跟上面数组中到对比，若存在，则删除对应 option
$('#s1 > option').each(function(i, domEle){
var $option = $(domEle);
var val = $option.val();
if($.inArray(val, arr) >= 0){ // 此 val 在数组存在
$option.remove(); // 删除对应 option 元素
}
});
}
</script>
</head>
<body>
<table border="1">
<tr>
<td>
<select id="s1" style="width:100px;" size="10"
multiple="multiple" >
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
<option value="5">选项5</option>
</select>
</td>
<td align="center">
<input type="button" value="去除重复" onclick="distinct();"/>
<br/>
</td>
<td>
<select id="s2" style="width:100px;" size="10"
multiple="multiple" >
<option value="1">选项1</option>
<option value="3">选项3</option>
<option value="5">选项5</option>
</select>
</td>
</tr>
</table>
</body>
</html>
总结：
以上就是用 JS 实现下拉框去重，代码的简单实现了，仅供参考，欢迎讨论交流。
以上是关于JS 实现下拉框去重的主要内容，如果未能解决你的问题，请参考以下文章