订购商品按字母顺序与世界分开

时间:2016-12-06 21:56:49

标签: javascript d3.js combobox

我使用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>

1 个答案:

答案 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);