我在此处添加了问题 Checkbox is not getting displayed in dropdown 以添加多选下拉列表。 在这里我使用了 mbootstarp,但我不想在这里获取软件包。所以我尝试添加多选下拉 通过点击此链接 https://www.jqueryscript.net/form/jQuery-jQuery-UI-Plugin-For-Simle-Tokenized-Autocomplete-Autocomplete-Multiselect.html#google_vignette。
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"/>
<!--JS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://jquery.autocomplete.multiselect.js"></script>
</head>
<body>
<input type="text" id="myautocomplete" />
<script type="text/javascript">
$("#myautocomplete").click(function(){
/* Local Data */
var carList = [
"Audi S6", "Audi S6", "Austin-Healey", "Alfa Romeo", "Aston Martin",
"BMW 7 ", "Bentley Mulsanne", "Bugatti Veyron",
"Chevrolet Camaro", "Cadillac ",
"Duesenberg J ", "Dodge Sprinter",
"Elantra", "Excavator",
"Ford Boss 302", "Ferrari 360", "Ford Thunderbird ",
"GAZ Siber"];
$('#myautocomplete').autocomplete({ source: carList, width: 205, multiselect:true});
})
</script>
</body>
</html>
添加此代码后,我可以看到下拉列表,并且只能添加一个数据。我不能添加多个数据,也没有看到正确选择的数据。有人可以帮助我吗?
答案 0 :(得分:1)
首先添加Javascript:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="src/jquery.autocomplete.multiselect.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"/>
添加 HTML:
<input id="myAutocomplete" type="text" />
Jquery:
$(function(){
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$('#myAutocomplete').autocomplete({
source: availableTags,
multiselect: true
});
})
希望对您有所帮助。