select中添加option的去重前台实现

最新推荐文章于 2023-06-29 17:01:59 发布
最新推荐文章于 2023-06-29 17:01:59 发布
阅读量3k 收藏
点赞数
分类专栏： 前端HTML和JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zrgood123/article/details/82763710
版权

从后台传回来的是列表,我们只需要其中的某个字段作为select的option,该字段可能会有重复元素. 对列表中每一个对象, 我们先判断该对象中的字段是否已经存在于select的option中,如果已经有了则不添加,如果没有则添加,程序中通过while循环控制,如果j一直到select中option个数的末尾都没有相等的元素存在,则进行添加,否则什么都不做.

下面注释掉的代码也可以实现option的去重功能

当然去重工作也可以在后台进行,到前台直接显示即可.

 

zrgood123
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Select去重并选中当前option.txt
12-05
去除select当中重复的option并选中当前的option
前端自己实现下拉框以及列表查询（去重）
weixin_45333397的博客
04-18 1904
前端小功能，根据列表实现下拉框功能，不依靠后端实现查询列表功能！（*以及列表去重）
vue实现多个下拉去重
weixin_33982670的博客
11-08 634
我们先来看一个图： 可以看到，在添加下拉之后，之前选过的选项不会出现在下拉里面了。 线上地址：线上地址 整个实现过程是用vue实现的，总体来说蛮简单，如果用jQuery实现就会复杂得多。 下面我们来看看vue-devtool里面的数据： 从数据层面，容易看出，整个下拉数据是来自selectMap，通过比较selectItemList来判断是否已经选中，选中的选项不显示。通过求和money计算出...
vue列表去重
weixin_40923558的博客
06-15 3134
vue列表去重 vue列表去重let arr = [1,1,2,3,4,2,5,2,1,3] let newList = [...new Set(arr)] console.log(newList)
vue下拉去重
qq_37272017的博客
03-10 604
var tempData =response.rows; var hash = {}; tempData = tempData.reduce(function (item, next) { hash[next.oltName] ? ‘’ : hash[next.oltName] = true && item.push(next); return item; }, []); self.postOptions = tempData; this.dateRes=tempData;
【Web开发】Vue2.0数据去重&Element-UI单选框
兴趣使然的创作者
02-15 1436
问题场景 写vue2.0的时候遇到了这么一个场景：我需要再用户提交的表单中设置一个下拉式选框，方便用户选取。 具体选项则需要动态从后端数据库中获取。通过后端接口，我可以获得数据表中某一列的数据，但是这些利用循环来进行选项填充，就会出现重复选项，因此需要对重复数据进行去重。 数据去重 我的字段名是sex，可用这个函数进行去重。 unique(arr) { // 根据唯一标识sex来对数组进行过滤 const res = new Map(); //定义常量 res,值为一个Map对象实例
layui select动态添加option的实例
08-27
"layui select动态添加option的实例" 本文主要讲解了如何使用 layui 实现select...本文讲解了如何使用layui实现select动态添加option的功能，提供了一个实用的示例代码，能够帮助开发者快速实现动态添加option的功能。
JavaScript实现select添加option
10-24
主要介绍了JavaScript为select添加option的方法和示例，十分的简单实用，有需要的小伙伴可以参考下。
JQuery动态添加Select的Option元素实现方法
01-21
如下所示： var selector=$('<select></select>...以上这篇JQuery动态添加Select的Option元素实现方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
通过隐藏option实现select的联动效果
12-11
3. 如果选择了某个非`<Please Select>`的选项，遍历`dropFrame`中的所有`option`，如果其`parentid`属性与`dropLang`的选择值不匹配，则将这些`option`包裹在隐藏的`span`元素中，从而实现隐藏效果。 `...
select下拉框去重复
weixin_30914981的博客
01-13 844
上代码： <html xmlns="http://www.w3.org/1999/xhtml"><head> <title>無題のページ</title> <script src="script/jquery-1.9.1.js" type="text/javascript"></script> &lt...
select下拉框数据回显,option去重
houjx3的博客
11-02 3588
select下拉框数据回显: 方法1 document.getElementById("province").value="${province}";   document.getElementById("province").options[${province}].selected= true;  document.getElementById("city").value="${city...
vue下拉列表去重
葫芦娃的博客
08-19 4051
今天讲下怎么给下拉框的值去重复 <el-select v-model="postData" style="width:220px;" multiple collapse-tags placeholder="请选择岗位"> <el-option v-for="item in postOptions" :label="item....
Vue实现动态循环的select下拉框去重功能：
SunPeng的博客
03-03 3230
1、 2、
vue数据去重
weixin_53339757的博客
01-11 500
vue数组去重
vue对选中的集合进行去重
九七的博客
11-10 734
【代码】vue对选中的集合进行去重。
Vue-动态循环select实现不重复数据
tanyz114的博客
07-03 4398
Vue-动态循环select实现不重复数据
vue中v-for重复数据处理||element下拉框去除重复
最新发布
qq_43476358的博客
06-29 2166
前端去重方法有多种,只说三种常用的(新老方法都有)1-使用常规双for循环(暴力算法)遍历比较的方式对值进行比较2-使用js方法sort排序（只针对数组），但是经常在vue等新框架中提示TypeError: arr.sort is not a function3-使用reduce方法(>_
php动态添加select option,layui中select动态添加option
05-16
在PHP中动态添加`select`的`option`可以通过在`option`标签中使用循环来实现，具体代码如下： ```php <select> <?php // 循环生成option标签 for ($i=1; $i<=10; $i++) { echo "<option value='$i'>$i</option>"; } ?> </select> ``` 在Layui中动态添加`select`的`option`可以使用Layui的`form`模块提供的方法来实现，具体代码如下： ```html <select id="mySelect" lay-filter="mySelect"> <option value="">请选择</option> </select> <script> layui.use('form', function() { var form = layui.form; // 动态添加option for (var i = 1; i <= 10; i++) { var option = "<option value='" + i + "'>" + i + "</option>"; $('#mySelect').append(option); } // 重新渲染表单 form.render('select'); // 监听select事件 form.on('select(mySelect)', function(data){ console.log(data.value); }); }); </script> ``` 在上面的代码中，我们首先在`select`中添加一个默认的`option`，然后使用循环动态添加其他的`option`。最后，我们通过`form.render('select')`方法重新渲染表单，确保动态添加的`option`可以正常显示。同时，我们还通过`form.on('select(mySelect)', function(data){})`来监听`select`事件，当用户选择了某个`option`时，就会触发这个事件并执行相应的操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值