javascript - jQuery 多选提交顺序错误

Question

我有一个包含 10 个或更多选项的多选。我以随机顺序选择选项。

问题是当我提交表单时，元素是按照选项的顺序发送的，而不是按照我选择它们的顺序发送的。

假设我有:

<option value="1">AAA</option>
<option value="2">BBB</option>
<option value="3">CCC</option>
<option value="4">DDD</option>
<option value="5">EEE</option>
<option value="6">FFF</option>
<option value="7">GGG</option>
<option value="8">HHH</option>

如果我按以下顺序选择元素:1,4,2,8，当我提交表单时，元素的顺序是:1,2,4,8。这是错误的，因为我希望订单尊重我所做的选择。

我绑定(bind)到手动设置订单使用:

$object.val(JSON.parse("[" + newVal.split(',') + "]"));

其中 newVal 是 ID 为 1、4、2、8 的字符串(按照我选择它们的顺序)，但它不起作用。

如果我尝试:

$object.val(JSON.parse("[" + newVal.split(',')[0] + "]"));

它将设置 1(第一个元素)的值，这很好，但如果我发送一个数组，它就不起作用。

任何关于如何解决此问题的想法都会有所帮助。期待感谢!

Answer 1

以下是实现这一目标的方法之一:

首先，您需要通过添加数据属性“data-order=''”来编辑“选项标签”

<option value="100" data-order="">foo</option>
<option value="101" data-order="">bar</option>
<option value="102" data-order="">bat</option>
<option value="104" data-order="">baz</option>
<option value="105" data-order="">baz</option>
<option value="106" data-order="">baz</option>
<option value="107" data-order="">baz</option>
<option value="108" data-order="">baz</option>

然后应用下面的jquery

$(document).keydown(function(event){
  if(event.which=="17")
    cntrlIsPressed = true;
});

$(document).keyup(function(){
    cntrlIsPressed = false;
});

var cntrlIsPressed = false;
var order = 1;

$("#data").on("click", "option", function() {
var clickedOption = $(this);
  if (cntrlIsPressed)
  {
    if (clickedOption.data("order") == "")
    {
      clickedOption.data("order", order);
      order++;
    }
    else {
      clickedOption.data("order", "");
      order--;
    }
  }
  else
  {
      $("#data option").data("order", "");
      order = 1
      clickedOption.data("order", order);
      order++;
  }

});

function showOrder()
{
  var myArr = [$("#data option").length];
  $("#data option").each(function () {
      var index = parseInt($(this).data("order"));
      myArr[index-1] = $(this).val();
  });

  console.log(myArr);
}