jquery动态添加下拉栏,怎么去避免重复添加

发布网友 发布时间：2022-04-22 01:07

我来回答

共7个回答

懂视网 时间：2022-04-22 05:28

这次给大家带来jquery动态添加和遍历option的方法，jquery动态添加遍历option的注意事项有哪些，下面就是实战案例，一起来看一下。

实例如下所示：

<pre name="code" class="html"><script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<select class="form-control" id='selectId'> 
<option class="all" value="0">全部</option> 
<option class="all" value="1">os2</option> 
<option>os2-anthonos</option> 
<option>os2-apps</option> 
<option>os2-centralpoint</option> 
<option>kf5-experimental</option> 
</select> 
<script> 
 //动态添加option 
 //$("#selectId").append("<option value='"+value+"'>"+text+"</option>"); 
 $(document).ready(function(){ 
 var string = ""; 
 $("#selectId option").each(function(){ //遍历全部option 
 var text = $(this).text(); //获取option的text 
 var value = $(this).val(); //获取option的value 
 if($(this).attr("class")=="all") 
 string +="{"+text+":"+value+"}"; 
 }); 
 alert(string.substring(0,string.length)); 
}); 
</script>

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

Angular2 父子组件通信方式

javascript的代码优化详解

360浏览器兼容模式的页面显示不全怎么处理

热心网友 时间：2022-04-22 02:36

1、确定当前需要添加元素的text以及对应的value

2、获取当前下拉框中所有的option元素数组optionArr，可以通过$('#citySelect option')获取元素集合。

3、遍历optionArr，判断需要添加的text或者value是否和optionArr相同，相同则不添加，没有重复则添加。

示例：
<select id='citySelect'>
    <option value='beijing'>北京</option>
    <option value='shanghai'>上海</option>
</select>
方法：
<script>
   function addCity(value, text){
       var optionArr = $('#citySelect option');
       for(var i=0;i<optionArr.length;i++){
           if(optionArr[i].text == text || optionArr[i].value == value){
               return false;
           }
       }
       var addOption = "<option value='" + value + "'>" + text + "</option>";
       $('#citySelect').append(addOption);
   }
</script>

热心网友 时间：2022-04-22 03:54

1、如果后台是java，建议后台装置好数据返回给页面。你可以用set或者map来组装数据，去除重复。

2、如果一定要jquery来去重复。你可以通过递归和嵌套for循环的方式来去除相同元素。

热心网友 时间：2022-04-22 05:29

<select id='citySelect'>
<option value=''>北京</option></select>方法：
<script>
//下拉框
$.get('/Huitubeccount/Expenses/SelectBrokerage', function (data) {//控制器路径
$("#HandleID").empty();//加上这个去重复
console.log(data);//输出
$.each(data, function (a) {//遍历
var str = ' <option value="' + data[a].HandleID + '">' + data[a].HandleName + '</option>'
$("#HandleID").append(str);
})
})
</script>

控制器
public ActionResult SelectAccountsurface()
{
var listAccountsurface = (from tbAccountsurface in mysql.FQ_Accountsurface
select new
{
tbAccountsurface.BalanceID,
tbAccountsurface.BserName,
}).ToList();
return Json(listAccountsurface, JsonRequestBehavior.AllowGet);
}

热心网友 时间：2022-04-22 07:20

这样，在for之前加
$("#cqNAME").find("option").each(function(){
$(this).remove();
});
或者
$("#cqNAME").find("option").remove();追问搞定了，太感谢了

热心网友 时间：2022-04-22 09:28

判断一下
望采纳

热心网友 时间：2022-04-22 11:53

可以通过sql查询的时候去重