避免追加具有相同值的select？

Question

在按钮上首次单击，选择附加选项'one'，在下一次单击时我想避免附加相同的值。

以下代码会导致添加相同的值，首次点击：一个 ，第二次点击：一，一，二 即可。希望避免重现现有价值。

$(document).ready(function(){
  var val=["one","two","three"];
  var n=1;
  $("button").click(function(){
     for(i=0; i<n; i++){
       $("select").not($("option[value='+val[i]+']")).append("<option>"+val[i]+"</option>");
     }
     n+=1;  
  });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click</button>
<select>
  <option>Select</option>
</select>

Answer 1

方式更优雅的解决方案

$(document).ready(function(){
var val=["one","two","three"];
  var n=0;
  $("button").click(function(){
     $("select").append("<option>"+val[n]+"</option>");
     n++; 
  });
 });

https://jsfiddle.net/e51mqfp7/

Answer 2

您可以使用.has()方法和:contains()选择器

    var select = $("select");
    //Append all in array
    for (i = 0; i < n; i++) {
      if (select.has('option:contains("' + val[i] + '")').length == 0)
        select.append("<option>" + val[i] + "</option>");
    }

＆＃13;

＆＃13;

$(document).ready(function() {
  var val = ["one", "two", "three"];
  var n = 1;
  $("button").click(function() {
    var select = $("select");
    //Append all in array
    for (i = 0; i < n; i++) {
      if (select.has('option:contains("' + val[i] + '")').length == 0)
        select.append("<option>" + val[i] + "</option>");
    }
    n += 1;
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click</button>
<select>
  <option>Select</option>
</select>

＆＃13;

＆＃13;

＆＃13;

您可以先删除所有option，然后再添加。

    var select = $("select");
    //Remove all except first
    select.find('option:not(:first)').remove();

    //Append all in array
    for (i = 0; i < n; i++) {
      select.append("<option>" + val[i] + "</option>");
    }

＆＃13;

＆＃13;

$(document).ready(function() {
  var val = ["one", "two", "three"];
  var n = 1;
  $("button").click(function() {
    var select = $("select");
    //Remove all except first
    select.find('option:not(:first)').remove();

    //Append all in array
    for (i = 0; i < n; i++) {
      select.append("<option>" + val[i] + "</option>");
    }
    n += 1;
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click</button>
<select>
  <option>Select</option>
</select>

＆＃13;

＆＃13;

＆＃13;

参考

1. .find()
2. :not() selector
3. :first selector

Answer 3

您正在选择元素的值，但在添加新option时，您不会为其设置任何值。另外首先检查元素是否不存在且仅仅是追加，现在你的$("select").not("one")没有意义（没有提到你在选择器中遗漏了"）

＆＃13;

＆＃13;

$(document).ready(function() {
  var val = ["one", "two", "three"];
  var n = 1;
  $("button").click(function() {
    for (i = 0; i < n; i++) {
      if ($("select option[value='" + val[i] + "']").length == 0) {
        $("select").append("<option value='"+val[i]+"'>" + val[i] + "</option>");
      }
    }
    n += 1;
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click</button>
<select>
  <option>Select</option>
</select>

＆＃13;

＆＃13;

＆＃13;

Answer 4

这就像OP想要的那样：

＆＃13;

＆＃13;

$(document).ready(function(){
	var val=["one","two","three"];
  var n=0;
  $("button").click(function(){
     for(i=0; i<=n; i++){
     	if(i == n){
       $("select").not($("option[value='+val[i]+']")).append("<option>"+val[i]+"</option>");
     }
     } 
     n+=1; 
  });
 });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click</button>
<select>
  <option>Select</option>
</select>

＆＃13;

＆＃13;

＆＃13;

JSFiddle Demo