选择jquery插件基本的用户界面不起作用 [英] chosen jquery plugin basic ui does not work
本文介绍了选择jquery插件基本的用户界面不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想使用选定的jquery插件，就像他们在官方网站中使用的示例一样：
I want to use chosen jquery plugin just like the same example that they use in the official website: http://harvesthq.github.io/chosen/
These are my files:
This is index.html:
<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>
Result looks like this:
Is wrong? I saw the html code generated by the official page and it was not the same. When I changed my code to this one:
<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>
I got this:
Do I need to do something else to get the same result of the official example?
解决方案
Try this in index.html
$(window).load(function(){
$(".chosen-select").chosen()
});
这篇关于选择jquery插件基本的用户界面不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
