Question

我的下拉列表应包含数组中所有项目的列表。但是，它们不应该从A-Z组织，但是选择一个项目应该使它成为列表中的第一项，并且列表应该从那里按字母顺序继续。我怎样才能做到这一点？

在这里输入代码

var array =["cellphone", "camara", "computer", "mouse", "track-pad", "usb", "screen"] 
enter code here

<select id="dropdownList">
<option>cellphone</option>
<option>camara</option>
<option>computer</option>
<option>mouse</option>
<option>track-pad</option>
<option>usb</option>
<option>screen</option>
</select>

Answer 1

你可以这样做：
查看下面的代码段

＆＃13;

var array = ["cellphone", "camara", "computer", "mouse", "track-pad", "usb", "screen"];

var select = document.getElementById('dropdownList');
select.addEventListener('change', function() {

  array.sort(function(val1, val2) {
    return val1.localeCompare(val2);
  });

  array.unshift(this.value);
  array.splice(array.lastIndexOf(this.value), 1);

  var values = "";
  for (var i = 0; i < array.length; i++) {

    values += '<option>' + array[i] + '</option>';

  }

  select.innerHTML = values;
  console.log(array);
  console.log(this.value);

});

＆＃13;

<select id="dropdownList">
  <option>cellphone</option>
  <option>camara</option>
  <option>computer</option>
  <option>mouse</option>
  <option>track-pad</option>
  <option>usb</option>
  <option>screen</option>
</select>

＆＃13;

Answer 2

我写了几个jQuery插件，使这项任务变得简单，适用于任何选择框。这是最简洁的jQuery代码。它是最佳的，因为我们从不删除选项并创建新选项。相反，我们会覆盖他们的价值观。

(function($) {
  $.fn.populateSelect = function(items, valueField, displayField) {
    return this.append(items.map(function(item, index) {
      return $('<option>', {
        value : valueField   != null ? item[valueField]   : index,
        text  : displayField != null ? item[displayField] : item
      });
    }));
  };
  $.fn.selectedValue = function() {
    return this.find('option:selected').val();
  };
  $.fn.sortOptionsBy = function(key) {
    var options = this.find('option'), arr = options.map(function(_, opt) {
      return { text: opt.text, value: opt.value };
    }).get().sort(function(o1, o2) {
      return o1[key] > o2[key] ? 1 : o1[key] < o2[key] ? -1 : 0;
    });
    options.each(function(idx, opt) { $.extend(opt, arr[idx]); });
    return this;
  };
  $.fn.moveToIndex = function(val, idx) {
    this.find('option[value="' + val + '"]').insertBefore(this.find('option:eq(' + idx + ')'));
    return this.prop('selectedIndex', idx);
  };
  $.fn.moveSelectedToTop = function() {
    var selected = this.selectedValue();
    return this.sortOptionsBy('text').moveToIndex(selected, 0);
  }
}(jQuery));

var data = ["cellphone", "camera", "computer", "mouse", "track-pad", "usb", "screen"];
$('#dropdown-list').populateSelect(data).on('change', function(e, item) {
  $(e.target).moveSelectedToTop();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id="dropdown-list"></select>

从下拉列表中的数组中选取某个项目，然后将其显示为第一个项目并按字母顺序显示。

2 个答案: