jquery 动态添加select 如何避免重复添加（去重）1

发布网友发布时间：2023-09-17 15:57

共5个回答

热心网友时间：2024-12-04 14:35

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>

热心网友时间：2024-12-04 14:36

jquery去重复如何去除select控件重复的option

方法也比较多，这里提供一个使用jquery选择器 :contains 的方法：
$(":contains(text)"); // 选取包含指定字符串的元素
这样就可以选出包含重复字符串的option元素，然后将其删掉追问您好麻烦您可以写一个实例吗

热心网友时间：2024-12-04 14:36

添加之前先清除select标签中的内容，$(".city").html("");然后再append();就不会有重复数据了

热心网友时间：2024-12-04 14:37

添加之前做一件事，判断是否已经存在名称。判断的方式很多，比较简单的就是jquery获取option集合，循环判断文本是否相同，相同则已经存在，提示不能添加。或者用contains，fiter等选择器，具体用法教程很多也很简单。

热心网友时间：2024-12-04 14:38

//每次添加前清空一次
success : function(data) {
    var obj = eval(data);
    if(obj.length > 0){
        $(".city").html("");
    }
    for ( var i = 0; i < obj.length; i++) {
    ...