Javascript 选择的jquery插件基本ui不工作
我想使用选择的jquery插件,就像他们在官方网站上使用的一样: 这些是我的文件: 这是index.html:Javascript 选择的jquery插件基本ui不工作,javascript,jquery,html,jquery-chosen,Javascript,Jquery,Html,Jquery Chosen,我想使用选择的jquery插件,就像他们在官方网站上使用的一样: 这些是我的文件: 这是index.html: <html> <body> <head> <script src="jquery-1.9.1.js"></script> <script src="chosen.jquery.js"></script>
<html>
<body>
<head>
<script src="jquery-1.9.1.js"></script>
<script src="chosen.jquery.js"></script>
<link rel="stylesheet" href="chosen.css">
</head>
<body>
<script type="text/javascript">
$(".chosen-select").chosen()
</script>
<select class="chosen-select" tabindex="8" multiple="" style="width:350px;" data-placeholder="Your Favorite Types of Bear">
<option value=""></option>
<option>American Black Bear</option>
<option>Asiatic Black Bear</option>
<option>Brown Bear</option>
<option>Giant Panda</option>
<option selected="">Sloth Bear</option>
<option disabled="">Sun Bear</option>
<option selected="">Polar Bear</option>
<option disabled="">Spectacled Bear</option>
</select>
</body>
</body>
</html>
$(“.choosed select”).choosed()
美国黑熊
亚洲黑熊
棕熊
大熊猫
懒熊
太阳熊
北极熊
眼镜熊
结果如下所示:
这是错的吗?我看到了由官方页面生成的html代码,结果不一样。当我将代码更改为此代码时:
<html>
<head>
<script src="jquery-1.9.1.js"></script>
<script src="chosen.jquery.js"></script>
<link rel="stylesheet" href="chosen.css">
<script type="text/javascript">
$(".chosen-select").chosen()
</script>
</head>
<body>
<select data-placeholder="Your Favorite Types of Bear" style="width:350px; display:none" multiple class="chosen-select" tabindex="-1">
<option value=""></option>
<option>American Black Bear</option>
<option>Asiatic Black Bear</option>
<option>Brown Bear</option>
<option>Giant Panda</option>
<option selected>Sloth Bear</option>
<option disabled>Sun Bear</option>
<option selected>Polar Bear</option>
<option disabled>Spectacled Bear</option>
</select>
<div class="chosen-container chosen-container-multi" style="width: 350px;" title="">
<ul class="chosen-choices">
<li class="search-field">
<input class="default" type="text" style="width: 183px;" autocomplete="off" value="Your Favorite Types of Bear" tabindex="8">
</li>
</ul>
<div class="chosen-drop">
<ul class="chosen-results">
<li class="active-result" data-option-array-index="1" style="">American Black Bear</li>
<li class="active-result" data-option-array-index="2" style="">Asiatic Black Bear</li>
<li class="active-result" data-option-array-index="3" style="">Brown Bear</li>
<li class="active-result" data-option-array-index="4" style="">Giant Panda</li>
<li class="active-result" data-option-array-index="5" style="">Sloth Bear</li>
<li class="disabled-result" data-option-array-index="6" style="">Sun Bear</li>
<li class="active-result" data-option-array-index="7" style="">Polar Bear</li>
<li class="disabled-result" data-option-array-index="8" style="">Spectacled Bear</li>
</ul>
</div>
</div>
</body>
</html>
$(“.choosed select”).choosed()
美国黑熊
亚洲黑熊
棕熊
大熊猫
懒熊
太阳熊
北极熊
眼镜熊
-
美国黑熊
- 亚洲黑熊
- 棕熊
- 大熊猫
- 树懒熊
太阳熊
北极熊
- 带眼镜的熊
我明白了:
我是否需要做其他事情才能获得与官方示例相同的结果?在
index.html
$(window).load(function(){
$(".chosen-select").chosen()
});
此代码不起作用的原因是它出现在源代码顺序中的select元素之前-因此,当脚本运行时,DOM(文档对象模型)中没有匹配的元素可用于应用所选插件方法 许多开发人员现在将他们的脚本放在页面底部-就在结束body元素标记之前-这既有助于确保您希望与之交互的元素当时在DOM中,又提高了性能,因为浏览器将停止加载DOM或任何其他资产(这些资产通常是并行/同时加载的)当它到达脚本时,仅当它已执行时才恢复。这主要是由于遗留原因,开发人员会使用document.write将内容动态添加到页面中-期望这些内容出现在脚本所在的位置,而不是调用write语句时浏览器刚好到达构建DOM的位置 我将把你的第一个例子修改如下-
<!doctype html>
<html>
<body>
<head>
<title>Add a title</title>
<link rel="stylesheet" href="chosen.css">
</head>
<body>
<select class="chosen-select" tabindex="8" multiple style="width:350px;" data-placeholder="Your Favorite Types of Bear">
<option value=""></option>
<option>American Black Bear</option>
<option>Asiatic Black Bear</option>
<option>Brown Bear</option>
<option>Giant Panda</option>
<option selected>Sloth Bear</option>
<option disabled>Sun Bear</option>
<option>Polar Bear</option>
<option disabled>Spectacled Bear</option>
</select>
<script src="jquery-1.9.1.js"></script>
<script src="chosen.jquery.js"></script>
<script>
$(document).ready(function() {
$(".chosen-select").chosen();
});
</script>
</body>
</html>
添加标题
美国黑熊
亚洲黑熊
棕熊
大熊猫
懒熊
太阳熊
北极熊
眼镜熊
$(文档).ready(函数(){
$(“.choosed select”).choosed();
});
这有两种方式。首先,脚本的位置在页面的末尾,因此运行时select元素应该已经在DOM中。其次,文档就绪事件处理程序保证在浏览器完全加载/构建DOM之前,我们创建的匿名函数不会运行。代码在函数中,否则它将被浏览器立即执行(并且会出现语法错误,因为ready方法需要函数作为参数)。文档就绪事件(在现代浏览器中称为DOMContentLoaded)比window.onload更可取,因为它在窗口加载事件之前触发,可能是在浏览器仍在加载页面所需的图像或其他大型资产时触发。这意味着用户开始与页面交互后,页面不太可能突然更改
其他几点-
- 您的文档中肯定需要doctype
- 尽量将样式表放在脚本之前
- 您有两个结束体元素标记
- 一次只能选择一个选择选项(具有选定属性)
- 多重、选定和禁用的属性是布尔属性,不需要任何值(您可以删除“”)