Question

如何根据用户选择选项的顺序而不是html中选项的顺序重新排序选择多个元素的逗号分隔值？< / p>

例如：

<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

试试这个 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 3

所提议的解决方案都没有浮出我的船，所以我提出了这个：

我的解决方案是将html5属性添加到多选元素数据排序值，我会根据最新的更改添加新值，并删除未选择的值。< / p>

最终的效果是可以随时查询数据排序值以获取用户排序值的当前列表。此外，所有选定的选项都包含＆＃34;选择＆＃34;。

的属性

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

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

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

4 个答案: