我用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>');
}
我已经创建了一个小提琴,也许它会帮助你(请注意,小提琴没有一个参考选择的插件库)。