У меня есть следующее использование 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>