Question

我有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>

Answer 1

var applyAndEmpty = function(input,queue) { return queue.reduce(function(prev,cur) { return cur.call(this,prev);}, input); };将保留从第一个菜单中选择的值，因此以下代码将逐字逐句地重复：

$(this).val()

我创建了一个fiddle，mybe会帮助你（请注意，小提琴并没有引用所选的插件库）。

使用Chosen.js设置下拉菜单html的样式

1 个答案: