如何禁止添加现有选项进行选择？

Question

如何不允许选择选项中已存在的值？ （使用jQuery）

$(document).on('click', '#add', function() {
  if ($('#new-option').val() != '') {
    var val = $('#new-option').val();
    $('#foo option:last').html(val);
    var opt = '<option>Other</option>';
    $('#foo').append(opt);
    $('#foo').val(val);
    $('#new-option').val('');
    console.log($("#foo option").each(function() {
      $(this).val();
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<select id="foo">
  <option>Notification</option>
  <option>Other</option>
</select>

<input type="text" id="new-option" required>
<button type="button" id="add">Add Option</button>

Answer 1

您可以遍历每个选择选项并检查它是否存在。使用jQuery。使用jQuery 0L来删除空间。

＆＃13;

＆＃13;

.trim()

＆＃13;

$(document).on('click', '#add', function(){
    if($('#new-option').val() != '')
    {
        var val = $('#new-option').val();
        var flag_add = true;
    	  $("#foo").find("option").each(function() {
            console.log($(this).val());
            if($(this).val().trim()==val.trim()){
                flag_add = false;
                alert("Option already added...")
                return;
            }    
        });
        if(flag_add)
        {
            $('#foo option:last').html(val);
            var opt = '<option>Other</option>';
            $('#foo').append(opt);
            $('#foo').val(val);
            $('#new-option').val('');
        }
    }    
});

＆＃13;

＆＃13;

＆＃13;

Answer 2

这应该这样做： 还有两件事需要注意：  1.文本字段.trim()中的多个空格应该修复它。  2.将案例检查为Other，other将被视为不同。

$(document).on('click', '#add', function(){
 var option_to_add = $("#new-option").val();
 var options = [];
 $("#foo option").each(function(){
      options.push($(this).text())
 });

 if(option_to_add != '')
 {

   if($.inArray(option_to_add,options) === -1)
   {
      $("#foo").append("<option>"+option_to_add+"</option>");
   }
   else
   {
      alert("Option already exists");
   }
 }
 else
 {
  alert("Empty value");
 }

});

Answer 3

循环显示当前值，仅在尚未存在时附加。有关详细信息，请参阅内联注释：

＆＃13;

＆＃13;

$(document).on('click', '#add', function() {

  var found = false;  // Track if new value was found in list
  
  // Loop through list options
  $("#foo > option").each(function(idx, el){
    // Compare (case-insensitive) new value against list values
    if($("#new-option").val().toLowerCase() === el.textContent.toLowerCase()){
      found = true;  // Set flag if value exists
    }
  });

  // If not found
  if(!found){
    // Create new option and append to list
    var opt = '<option>' + $("#new-option").val()  + '</option>';
    $('#foo').append(opt);
  }

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<select id="foo">
  <option>Notification</option>
  <option>Other</option>
</select>

<input type="text" id="new-option" required>
<button type="button" id="add">Add Option</button>

＆＃13;

＆＃13;

＆＃13;

Answer 4

解决了您的问题，请用此代码替换您的脚本

<script> 
$(document).ready(function() { 
    $(document).on('click', '#add', function() {
      if ($('#new-option').val() != '') {
        var val = $('#new-option').val();
        if($("#foo option[value='"+val+"']").length > 0){
         alert('already present');
        }else{
          var opt = '<option value="'+val+'">'+val+'</option>';
          $('#foo').append(opt);
        }
        $('#new-option').val(''); 
      }

    });
}); 

</script>

Answer 5

这将有效：

$(document).on('click', '#add', function(){
var val = $('#new-option').val();
if(val != ''){
    var arr = $('#foo').children('option').map(function(i,el){return $(el).text()});
    if($.makeArray(arr).indexOf(val) != -1){
        alert("this option exists...")
    }else{
        $('#foo').append('<option>'+val+'</option>');
        $('#new-option').val('');
    }
}
});

Answer 6

使用lodash库，您可以使用some功能，该功能可以找到＆＃34;＆＃34;如果给定数组中至少有1个项匹配条件（这里是每个选项的文本与新选项之间的相等）。

＆＃13;

＆＃13;

$(document).on("click", "#add", function() {
  var newoption = $("#new-option").val();
  var options = $("#foo option");
  if (newoption != "") {
    if(!_.some(options, function(opt) { return $(opt).text() == newoption; })) {
      $("#foo").append("<option>" + newoption + "</option>");
      console.log(newoption + " added");
    } else {
      console.log(newoption + " not added");
    }
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>

<select id="foo">
  <option>Notification</option>
  <option>Other</option>
</select>

<input type="text" id="new-option" required>
<button type="button" id="add">Add Option</button>

＆＃13;

＆＃13;

＆＃13;