jQueryマルチセレクションの送信順序が間違っています

Question

10個以上のオプションを持つマルチセレクションがあります。オプションをランダムに選択します。

問題は、フォームを送信すると、選択した順序ではなく、オプションの順番で要素が送信されることです。私は、フォームを送信すると、要素の順序は、1、4、2、8：1、私は次の順序で要素を選択した場合

<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> 

：

それでは、私が持っているとしましょう2,4,8。そして、これは間違っています。なぜなら、私の選択を尊重したいからです。

は私が手動で使用して順序を設定するために結ば：

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

newValには、IDの1,4,2,8（私はそれらを選択した順序で）を持つ文字列ですが、そうでない

作業。

私がしようとした場合：

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

それは良いである、1（最初の要素）の値を設定しますが、私はそれが動作しない配列を送信する場合。

この問題を解決するにはどうすればよいでしょうか。予告ありがとう！

Answer 1

後はそれを達成する方法の一つである：

あなたが「= 『』データ・オーダー」

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

Answer 2

を適用し、複数のトリガ（「クリック」）/トリガ（「ブラー」）のイベントがあります。私の場合、タイムアウトを設定してオプションを並べ替える必要がありました。

提出された注文がオプション注文であることがわかりました。だから私の考えは選択したオプションを選択の先頭に移動することでした。選択したオプションがない場合は、最初にオプションを移動します。選択したオプションがある場合、最新の選択したオプションの後に選択したオプションを追加します。

私はそれが最良の解決策ではないことを知っていますが、うまくいきます。ないページのメモリで、確かではない直列化された形式で - あなたはオプションを選択するためには、 `SELECT`要素によって保存どのような方法ではない

this.orderElementInitData = function (id) { 
    var newSelectOption = select.find('option[value="' + id + '"]'); 
    select.find('option[value="' + id + '"]').remove(); 
    var firstSelected = select.find('option:eq(0)').attr('selected'); 
    if(typeof firstSelected !== typeof undefined && firstSelected !== false) { 
    select.find('option[selected="selected"]:last').after(newSelectOption); 
    } else { 
    select.find('option:eq(0)').before(newSelectOption); 
    } 
};