Styling dropdown menu html with Chosen.js
Question
I have javascript to create a dropdown menu on the onchange event of another menu. My first menu is styled with Chosen.js and works fine, my second menu is not getting styled as it should. 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 answers
solution1
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:
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).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.