javascript - 如何禁止添加现有选项来选择？

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>