1
我有以下使用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>