Question

我正在使用selectize.js，其中数据是通过数组添加的。我想实现在对象中定义为DISPLAYORDER的订单下拉列表。

下面的代码将生成列表。

option: function(item, escape) {
    var popular = escape(item.ISPOPULAR) == 1 ? ' '+'isPopular' : '';
    return '<div class="option'+popular+'" data-scope="'+escape(item.TRAVELSCOPE)+'">' + item.COUNTRY + '</div>';
}

var countries_list = [ 
    {COUNTRY: "Canada", TRAVELSCOPE: 0, ISPOPULAR: 1, DISPLAYORDER: 2},
    {COUNTRY: "Thailand", TRAVELSCOPE: 3, ISPOPULAR: 1, DISPLAYORDER: 3},
    {COUNTRY: "Australia", TRAVELSCOPE: 1, ISPOPULAR: 1, DISPLAYORDER: 5},
    {COUNTRY: "Switzerland", TRAVELSCOPE: 2, ISPOPULAR: 1, DISPLAYORDER: 4},
    {COUNTRY: "United Kingdom (UK)", TRAVELSCOPE: 1, ISPOPULAR: 1, DISPLAYORDER: 6},
    {COUNTRY: "Singapore", TRAVELSCOPE: 3, ISPOPULAR: 1, DISPLAYORDER: 7},
    {COUNTRY: "Indonesia", TRAVELSCOPE: 3, ISPOPULAR: 1, DISPLAYORDER: 8},
    {COUNTRY: "Malaysia", TRAVELSCOPE: 3, ISPOPULAR: 1, DISPLAYORDER: 9},
    {COUNTRY: "Germany", TRAVELSCOPE: 2, ISPOPULAR: 1, DISPLAYORDER: 11},
    {COUNTRY: "South korea", TRAVELSCOPE: 3, ISPOPULAR: 0, DISPLAYORDER: 0},
    {COUNTRY: "USA", TRAVELSCOPE: 0, ISPOPULAR: 1, DISPLAYORDER: 1},
    {COUNTRY: "Iraq", TRAVELSCOPE: 3, ISPOPULAR: 0, DISPLAYORDER: 0},
    {COUNTRY: "Afghanistan", TRAVELSCOPE: 3, ISPOPULAR: 0, DISPLAYORDER: 0},
    {COUNTRY: "Albania", TRAVELSCOPE: 1, ISPOPULAR: 0, DISPLAYORDER: 0},
    {COUNTRY: "Italy", TRAVELSCOPE: 2, ISPOPULAR: 1, DISPLAYORDER: 10},
    {COUNTRY: "Algeria", TRAVELSCOPE: 1, ISPOPULAR: 0, DISPLAYORDER: 0}
];

$('#select-coutries').selectize({
    hideSelected:false,
    preload:true,
    selectOnTab:true,
    plugins: ['remove_button'],
    valueField: 'COUNTRY',
    labelField: 'COUNTRY',
    searchField: 'COUNTRY',
    options:countries_list,
    openOnFocus: true,
    render: {
        item: function(item, escape) {
            return '<div class="item" data-scope="'+escape(item.TRAVELSCOPE)+'" data-value="'+escape(item.COUNTRY)+'">' + item.COUNTRY + '</div>';
        },
        option: function(item, escape) {
            var popular = escape(item.ISPOPULAR) == 1 ? ' '+'isPopular' : '';
            return '<div class="option'+popular+'" data-scope="'+escape(item.TRAVELSCOPE)+'">' + item.COUNTRY + '</div>';
        }
    },
});

<link href="https://selectize.github.io/selectize.js/css/selectize.default.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://selectize.github.io/selectize.js/js/selectize.js"></script>

<select id="select-coutries" name="countires[]" multiple class="demo-default" placeholder="Type countries...">
  <option value="">type in here...</option>
</select>

Answer 1

您需要先对countries_list进行排序，然后再传递给selectize，如下所示：

countries_list.sort((a,b) => a.DISPLAYORDER && b.DISPLAYORDER
   ? a.DISPLAYORDER - b.DISPLAYORDER 
   : a.DISPLAYORDER ? -1 : 0)

所以您的代码应如下所示：

$('#select-coutries').selectize({
    options: countries_list.sort((a,b) => a.DISPLAYORDER && b.DISPLAYORDER
      ? a.DISPLAYORDER - b.DISPLAYORDER 
      : a.DISPLAYORDER ? -1 : 0),
    // ... rest of the configuration for selectize
});

工作版本可以为seen here

从其数组值升序追加元素

1 个答案: