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

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 .trim()删除比较空间。

 $(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(''); } } }); 

 <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 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

循环当前值，仅在不存在时附加。 有关详细信息，请参见内联注释：

 $(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); } }); 

 <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 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函数，如果给定数组中至少有一项符合条件（这里是每个选项的文本与新选项之间的相等性），则可以“查找”。

 $(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"); } } }); 

 <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>