如何根据用户选择顺序重新排序多选的值

How to re-order the value of a multiple select based on user selection order

本文关键字：排序新排序何根用户选择顺序更新时间：2024-01-28

如何根据用户选择选项的顺序而不是html中选项的顺序，对select multiple元素的逗号分隔值重新排序？

例如：

<select multiple>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

如果用户选择"3"，然后选择"1"，再选择"2"，则返回的选择值为"1,2,3"。如何使其返回"3,1,2"？

注意，我使用的是jQuery和HTML5，所以如果需要，我可以使用这些工具。

谢谢！

这会记录每个元素的点击，并将其保存到数组中。取消选择某个项时，该项将从数组中删除。

var vals = [];
$(document).ready(function(e) {
  $('#selector').change(function(e) {
    for(var i=0; i <$('#selector option').length; i++) {
      if ($($('#selector option')[i]).prop('selected') ) {
        if (!vals.includes(i)) {
          vals.push(i);
        }
      } else {
        if (vals.includes(i)) {
          vals.splice(vals.indexOf(i), 1);
        }
      }
    }
  })
  $("#final").click(function(e) {
    var order = '';
    vals.forEach(function(ele) {
      order += $($('#selector option')[ele]).val() + ',';
    })
    console.log(order);
  })
})

代码笔：http://codepen.io/nobrien/pen/pydQjZ

没有一个提议的解决方案让我的船浮起来，所以我想出了这个：

我的解决方案是向multiselect元素添加一个html5属性，数据排序值，我会根据最新的更改向其添加新值，并删除未选择的值。

最终的效果是可以随时查询数据排序的值，以获得用户排序值的当前列表。此外，所有选定的选项都具有"选定"的属性。

我希望这能帮助其他人。。。

https://jsfiddle.net/p1xelarchitect/3c5qt4a1/

HTML:

<select onChange="update(this)" data-sorted-values="" multiple>
    <option>A</option>
    <option>B</option>
    <option>C</option> 
</select>

Javasript:

function update(menu) {
    // nothing selected
    if ($(menu).val() == null) 
    {
        $.each($(menu).find('option'), function(i) 
        {
            $(this).removeAttr('selected');
            $(menu).attr('data-sorted-values', '');
        });
    } 
    // at least 1 item selected
    else 
    {
        $.each($(menu).find('option'), function(i) 
        {
            var vals = $(menu).val().join(' ');
            var opt = $(this).text();
            if (vals.indexOf(opt) > -1) 
            {
                // most recent selection
                if ($(this).attr('selected') != 'selected') 
                {
                    $(menu).attr('data-sorted-values', $(menu).attr('data-sorted-values') + $(this).text() + ' ');
                    $(this).attr('selected', 'selected');
                }
            } 
            else 
            {
                // most recent deletion
                if ($(this).attr('selected') == 'selected') 
                {
                    var string = $(menu).attr('data-sorted-values').replace(new RegExp(opt, 'g'), '');
                    $(menu).attr('data-sorted-values', string);
                    $(this).removeAttr('selected');
                }
            }
        });
    }
}

试试这个https://jsfiddle.net/ksojitra00023/76Luf1zs/

  <select multiple>
        <option>1</option>
        <option>2</option>
        <option>3</option>
    </select>
    <div id="output"></div>
$('select').click(function(){
  $("#output").append($(this).val());
});

var data = '3,1,2';
var dataarray=data.split(",");
var length =dataarray.length;
for(i=0;i<length;i++){
    // Set the value
    $('#select').multiSelect('select',dataarray[i]);
}