用selected .js样式化下拉菜单html

Styling dropdown menu html with Chosen.js

本文关键字：下拉菜单 html 样式 selected js      更新时间：2023-09-26

我用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>');
}

我已经创建了一个小提琴，也许它会帮助你(请注意，小提琴没有一个参考选择的插件库)。

相关文章：