我正在尝试使用Select2库。但是我什么都没露面。即使我尝试了这个简单的示例,也没有用。 HTML文件,CSS文件和JS文件都在同一文件夹中。
当我加载此浏览器是完全空白。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="select2.css" rel="stylesheet" />
<script src="select2.js"></script>
</head>
<body>
<div class="controls-group">
<div class="controls">
<script type="text/javascript">
$(".example-basic-multiple").select2();
<select class="example-basic-multiple" multiple="multiple">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
</script>
</div>
</div>
</body>
</html>
最佳答案
链接到JS库后,您需要将<select>
放在脚本标签之外,最好放在<head>
中:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="select2.css" rel="stylesheet" />
<script src="select2.js"></script>
<script>
$(function() {//Waits until the page is fully loaded before running code
$(".example-basic-multiple").select2();
});
</script>
</head>
<body>
<div class="controls-group">
<div class="controls">
<select class="example-basic-multiple" multiple="multiple">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
</div>
</div>
</body>
</html>
关于javascript - HTML文档中的选择元素未显示,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/28705192/