我在复选框中选中的值应出现在下拉列表中。
每次我选择一个新值时，以前的值都应该从下拉列表中清除，并且只显示新选择的值。
但现在，新值与以前的值一起显示。
下面是我目前拥有的代码。
HTML:
<html>
<body>
<select id="select-client" name="client">
<option value="-1">-select-</option>
</select>
</body>
</html>
JavaScript:
<script>
$(document).ready(function() {
var selectedKnowledgeBaseArray = [];
$("#clientuser").on('click', function() {
$("input[type=checkbox]:checked").each(function() {
alert($(this).val());
selectedKnowledgeBaseArray.push($(this).val());
});
$.ajax({
method: "POST",
url: "client_user_map.json",
processData: true,
data: {
selectedKnowledgeBaseArray: selectedKnowledgeBaseArray
},
traditional: true,
dataType: "json",
success: function(data) {
$("#clntusrmap").show();
$('#clntusrmap').find('input:text').val('');
$('input:checkbox').removeAttr('checked');
buildSortedData(data);
}
});
function buildSortedData(data) {
if (data[0].length > 0) {
var select = document.getElementById("select-client");
for (var i = 0; i < data[0].length; i++) {
var option = document.createElement('option');
option.text = option.value = data[0][i];
console.log(data[0][i]);
select.add(option, i + 1);
$('.deleteMeetingClose').on("click", function() {
var select = document.getElementById("select-client");
$('select').empty();
});
}
}
}
});
});
</script>
最佳答案
我假设您在问题中提到的内容在单击 #clientuser 时运行。因此，问题出在函数之间共享的数组 selectedKnowledgeBaseArray 上。
每当您点击 #clientuser 时，input[type=checkbox]:checked 选择器的选中元素都会附加到 selectedKnowledgeBaseArray 中，并且然后这个数组被传递给 AJAX 调用。
我不确定 AJAX 调用返回什么，但如果它返回您传递的元素，函数 buildSortedData 将接收它们并尝试使用以下方法将它们附加到您的选择框select.add(option, i + 1);.
另请注意，您正在循环中调用以下代码段
$('.deleteMeetingClose').on("click", function() {
var select = document.getElementById("select-client");
$('select').empty();
});
这会在 .deleteMeetingClose 匹配的所有元素上绑定(bind)多个点击事件，如果还没有，这肯定会在将来产生问题。
关于javascript - 如何从 <select> 下拉列表中删除现有的 <option>？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41611878/