我使用d3来填充两个组合框。
现场演示在这里:http://plnkr.co/edit/NRGa5YqvCSNraveH5Ci0?p=preview
如何确保组合框中的国家/地区始终按字母顺序排列 - “世界”除外,它应始终是组合框中出现的第一个项目?
例如,如果选择了XXX,我希望此订单
world
aruba
uk
usa
这是代码:
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>comboBoxWithRadios</title>
<script src="https://d3js.org/d3.v3.js"></script>
<style type="text/css">
#projection-menu {
left: 5px;
top: 45px;
}
#category-menu {
left: 75px;
top: 5px;
}
</style>
</head>
<body>
<select id="category-menu"></select>
<select id="projection-menu"></select>
<script type="text/javascript">
var exampleCSV = "comboBoxWithRadios.csv"
var defaultCountry = "world";
updateCategoryCombo();
updateGeoCombo();
function updateCategoryCombo(geo) {
d3.csv(exampleCSV, function(rows) {
var menu = d3.select("#category-menu")
.on("change", function () {
updateGeoCombo(this.value);
});
menu.selectAll("option")
.data(d3.map(rows, function(d) {
return d.category;
}).keys())
.enter()
.append("option")
.text(function(d) {
return d;
});
});
};
function updateGeoCombo(categ) {
d3.csv(exampleCSV, function(rows) {
dta = rows.filter(function(row) {
if (row['category'] == categ) {
return true;
}
});
//clear combobox
removeOptions(document.getElementById("projection-menu"));
var menu = d3.select("#projection-menu")
.on("change", changeGeo);
menu.selectAll("option")
.data(d3.map(dta, function(d) {
return d.country;
}).keys())
.enter()
.append("option")
.text(function(d) {
return d;
});
});
};
function changeGeo() {
updateCategoryCombo(this.value);
};
function removeOptions(selectbox) {
var i;
for (i = selectbox.options.length - 1; i >= 0; i--) {
selectbox.remove(i);
}
}
</script>
</body>
</html>
答案 0 :(得分:3)
要对具有单词或单词组优先级的数组进行排序,可以使用对象作为排序顺序,使用默认值作为所有其他单词。
var array = ['usa', 'uk', 'aruba', 'world'],
order = { default: 0, world: -1 };
array.sort(function (a, b) {
return (order[a] || order.default) - (order[b] || order.default) || a.localeCompare(b);
});
console.log(array);