javascript 选择的 jquery 插件基本 ui 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20811270/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
chosen jquery plugin basic ui does not work
提问by Zinov
I want to use chosen jquery plugin just like the same example that they use in the official website: http://harvesthq.github.io/chosen/
我想使用选定的 jquery 插件，就像他们在官方网站上使用的示例一样：http: //harvesthq.github.io/chosen/
These are my files:
这些是我的文件：
This is index.html:
这是 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代码，不一样。当我将代码更改为以下代码时：
<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?
我是否需要做其他事情才能获得与官方示例相同的结果？
回答by pwdst
The reason this code did not work is that it appeared before the select element in the source order - thus when the script was run there were no matching elements in the DOM (Document Object Model) to apply the chosen plugin methods against.
这段代码不起作用的原因是它出现在源顺序中的 select 元素之前 - 因此当脚本运行时，DOM（文档对象模型）中没有匹配的元素来应用所选的插件方法。
Many developers now place their scripts at the bottom of the page - just before the closing body element tag - which both helps ensure that the elements you wish to interact with are in the DOM at the time, and improves performance as the browser will stop loading the DOM or any other assets (these are normally loaded in parallel/simultaneously) when it reaches a script, resuming only when it has executed. This is largely for legacy reasons where developers would use document.write to dynamically add content to the page - the expectation was that this content should appear where the script is, not where the browser happened to have reached building the DOM when the write statement was called.
许多开发人员现在将他们的脚本放在页面底部 - 就在结束 body 元素标记之前 - 这既有助于确保您希望与之交互的元素当时在 DOM 中，并且在浏览器将停止加载时提高性能当 DOM 或任何其他资产（这些资产通常并行/同时加载）到达脚本时，仅在它执行后恢复。这主要是出于遗留原因，开发人员会使用 document.write 动态地向页面添加内容 - 期望这些内容应该出现在脚本所在的位置，而不是在 write 语句出现时浏览器碰巧到达构建 DOM 的位置叫。
I would change your first example as follows-
我会改变你的第一个例子如下-
<!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>
This works in two ways. Firstly the placement of the scripts is at the end of the page so the select element should already be in the DOM when run. Secondly the document ready event handler guarantees that the anonymous function we created won't be run until the browser has fully loaded/built the DOM. The code is in a function as otherwise it would be executed immediately by the browser (and there would be a syntax error as the ready method expects a function as a parameter). The document ready event (known as DOMContentLoaded in modern browsers) is preferable to window.onload as it fires beforethe window load event, potentially whilst the browser is still loading images or other large assets needed by the page. This means your page is less likely to suddenly change after the user has started interacting with it.
这有两种方式。首先，脚本的位置是在页面的末尾，所以选择元素在运行时应该已经在 DOM 中。其次，文档就绪事件处理程序保证我们创建的匿名函数在浏览器完全加载/构建 DOM 之前不会运行。代码在一个函数中，否则它将被浏览器立即执行（并且会出现语法错误，因为 ready 方法需要一个函数作为参数）。文档就绪事件（在现代浏览器中称为 DOMContentLoaded）比 window.onload 更可取，因为它之前触发窗口加载事件，可能在浏览器仍在加载页面所需的图像或其他大型资产时。这意味着您的页面不太可能在用户开始与之交互后突然更改。
Some other points-
其他几点——
- You definitely need a doctype in your documents
- Try to always put stylesheets before scripts
- You had two closing body element tags
- Only one select option can be selected - have the selected attribute - at any one time.
- The attributes multiple, selected and disabled are boolean attributes, no value is required (you can remove the ="")
- 您的文档中肯定需要一个文档类型
- 尝试始终将样式表放在脚本之前
- 你有两个关闭的 body 元素标签
- 任何时候只能选择一个选择选项 - 具有所选属性。
- 属性 multiple、selected 和 disabled 是布尔属性，不需要值（可以去掉 =""）
See http://learn.jquery.com/using-jquery-core/document-ready/for more
有关更多信息，请参阅http://learn.jquery.com/using-jquery-core/document-ready/
