[英]Styling dropdown menu html with Chosen.js
我有JavaScript可在另一个菜单的onchange事件上创建一个下拉菜单。 我的第一个菜单已使用Chosen.js设置样式，并且工作正常，而我的第二个菜单未获得应有的样式设置。 我曾尝试使用" 万一我需要使用双引号而不是单引号，这打破了第二个下拉菜单，我不明白为什么。
<!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>
$(this).val()将保存从第一个菜单中选择的值，因此以下代码将逐个字母地对其进行迭代：
for (var i = 0; i < $(this).val().length; i++) {
$('#first_selected').append('<option value="' + $(this).val()[i] + '">' + $(this).val()[i] + '</option>');
}
我创建了一个小提琴 ，但它会为您提供帮助（请注意，小提琴没有对所选插件库的引用）。
select2.js 和 selected.js 未在下拉菜单上正确呈现
[英]select2.js and chosen.js not rendering properly on dropdown menu
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.