我想在第一次单击它时重新填充选择元素。起初我只显示“B”元素。单击它时,它将重新填充列表并选择“B”。问题是它不能正常工作。当我单击它时,它只显示一个元素“A”。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
<script type='text/javascript' src="http://datatables.net/release-datatables/media/js/jquery.dataTables.min.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
var select = "<option value=\"A\" class=\"op\">A</option><option value=\"B\" class=\"op\">B</option><option value=\"C\" class=\"op\">C</option>";
var selected = "B";
$("#test").click(function() {
var size = $(this).find("option").size();
if(size == 1) {
//$(this).empty();
$(this).children().remove().end().append(select);
$(this).val(selected);
$("#test option").filter(function() {
return $(this).text() == selected;
}).prop('selected', true);
}
});
});
</script>
</head>
<body>
SELECT ELEM
<select id="test">
<option value="B" class="op">B</option>
</select>
</body>
</html>