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 그리고 이것은 잘못된 것입니다. 왜냐하면 나는 저의 선택을 존중하도록 명령하기를 원하기 때문입니다.

내가 수동으로 사용 순서를 설정하는 연결 :

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

된 newval이 ID의 1,4,2,8 (내가 그들을 선택한 순서대로)와 문자열이지만, 그렇지 않은

작업.

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

그것은 좋은 일 (첫 번째 요소)의 값을 설정합니다,하지만 난 배열을 보내는 경우 작동하지 않습니다 :

나는 시도하십시오.

어떻게하면이 문제를 해결할 수 있습니다. 예기 된 감사!

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

을 적용하고 여러 트리거 ('클릭')/트리거 ('흐림') 이벤트가 있습니다. 제 경우에는 시간 초과를 설정하고 옵션을 재정렬해야했습니다.

제출 된 주문이 옵션 주문임을 확인했습니다. 그래서 내 생각은 선택한 옵션을 선택 항목의 맨 위로 이동하는 것이 었습니다. 따라서 선택된 옵션이 없다면 옵션을 먼저 이동합니다. 선택한 옵션이있는 경우 선택한 옵션을 최신 옵션 뒤에 추가합니다.

나는 그것이 최선의 해결책은 아니라는 것을 알고 있지만, 잘 작동하고 있습니다. 직렬화 된 형태로 확실히하지 페이지의 메모리에, 그리고 -

가

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