[英]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.