使用Chosen.js样式化下拉菜单html
[英]Styling dropdown menu html with Chosen.js
问题描述
I have javascript to create a dropdown menu on the onchange event of another menu. 
我有JavaScript可在另一个菜单的onchange事件上创建一个下拉菜单。 My first menu is styled with Chosen.js and works fine, my second menu is not getting styled as it should. 我的第一个菜单已使用Chosen.js设置样式，并且工作正常，而我的第二个菜单未获得应有的样式设置。 I have tried using " 我曾尝试使用" in case I needed to use double rather than single quotes, this broke the second dropdown and I don't understand why. 万一我需要使用双引号而不是单引号，这打破了第二个下拉菜单，我不明白为什么。
<!DOCTYPE html> <html> <head> <title>Operations</title> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="docsupport/style.css"> <link rel="stylesheet" type="text/css" href="docsupport/prism.css"> <link rel="stylesheet" type="text/css" href="chosen.css"> </head> <body class="back3"> <select id="zone" select data-placeholder="Choose a Zone..." class="chosen-select" style="width:450px;"> <option value=""></option> <option value="North America">North America</option> <option value="Europe">Europe</option> <option value="Asia">Asia</option> <option value="North Africa">North Africa</option> </select> <div id="country"> </div> <script src="jquery.min.js" type="text/javascript"></script> <script src="chosen.jquery.js" type="text/javascript"></script> <script src="docsupport/prism.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var config = { '.chosen-select': {disable_search: true}, '.chosen-select-deselect': { allow_single_deselect: true }, '.chosen-select-no-single': { disable_search_threshold: 10 }, '.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' }, '.chosen-select-width': { width: "100%" } } for (var selector in config) { $(selector).chosen(config[selector]); } $('#zone').change(function () { $('#country').html("<select id='first_selected' select data-placeholder='Choose a Country...' class='chosen-select' style='width:450px;'></select>"); for (var i = 0; i < $(this).val().length; i++) { $('#first_selected').append('<option value="' + $(this).val()[i] + '">' + $(this).val()[i] + '</option>'); } }) </script> </body> </html>
1 个解决方案
解决方案1
0 2015-05-18 18:01:33
$(this).val() will hold the value selected from the first menu, therefore the following code will iteretate over it, letter by letter: $(this).val()将保存从第一个菜单中选择的值，因此以下代码将逐个字母地对其进行迭代：
for (var i = 0; i < $(this).val().length; i++) {
$('#first_selected').append('<option value="' + $(this).val()[i] + '">' + $(this).val()[i] + '</option>');
}
I have create a fiddle , mybe it will help you (please note that the fiddle doesn't have a reference to the chose plugin lib). 我创建了一个小提琴 ，但它会为您提供帮助（请注意，小提琴没有对所选插件库的引用）。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.