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

Question

如何根据用户选择选项的顺序而不是 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，所以如果需要，我可以使用这些工具。

谢谢！

Answer 1

这会记录每个元素的点击添加并将其保存到一个数组中。当一个项目被取消选择时，它会从数组中移除。

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);
  })
})

Codepen：http://codepen.io/nobrien/pen/pydQjZ

Answer 2

提出的解决方案都没有让我满意，所以我想出了这个：

我的解决方案是向多选元素 data-sorted-values 添加一个 html5 属性，我会在其中添加新值，并根据最新更改删除未选择的值。

最终的效果是可以随时查询data-sorted-values，得到当前用户排序值的列表。此外，所有选定的选项都具有“选定”属性。

我希望这可以帮助其他人......

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');
                }
            }
        });
    }
}

Answer 3

试试这个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());
});

Answer 4

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]);
}