如何不允许选择选项中已存在的值? (使用 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>
最佳答案
您可以循环遍历每个选择选项并检查它是否存在。使用 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>
关于javascript - 如何禁止添加现有选项来选择?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44567613/