Порядок выбранных опций

Question

Я пытаюсь создать плагин, который позволит моим пользователям добавлять теги в свои темы. Моя идея состояла в том, чтобы использовать только регулярный выбор с несколько atribute, как это:

<form id="multiselect" method="post" action="foo.php"> 
 
    <select id="tags" name="tag_id[]" multiple="multiple"> 
 
\t <option value="1">Tag 1</option> 
 
\t <option value="2">Tag 2</option> 
 
\t <option value="3">Tag 3</option> 
 
\t <option value="4">Tag 4</option> 
 
\t <option value="5">Tag 5</option> 
 
    </select> 
 
    <input type="submit" name="submit" value="Send" class="button"> 
 
</form>

однако я хочу иметь возможность добавлять их в том порядке, что пользователь выбрал их ... например, если бы кто-то выбрал 2,4,1, я хочу иметь возможность добавлять теги в том же порядке. Проблема в том, что массив (print_r($_POST["tag_id"]);) сортируется по параметрам, как они есть в select, а не в том порядке, в котором пользователь их выбрал. Какой лучший подход, чтобы я мог работать с порядком в PHP? Спасибо

Answer 1

Вы не можете сделать это напрямую. Вам нужно будет сделать это с помощью javascript. Хранить стопку и всякий раз, когда значение #tags изменений сделайте следующее:

• Удалите невыбранные элементы из стека (если таковые имеются) в стеке
• нажимные вновь выбранные элементы в стек.

Здесь я показал реализацию с JQuery

$(document).ready(function(e) { 
 
    var tags = []; 
 
    $("#tags").change(function(e) { 
 
     var val = $("#tags").val(); 
 
     var i; 
 
     for(i = 0; i < tags.length; i++) { 
 
      if(val.indexOf(tags[i]) == -1){ 
 
       tags.splice(i,1); 
 
       i--; 
 
      } 
 
     } 
 
     for(i in val){ 
 
      if(tags.indexOf(val[i]) == -1){ 
 
       tags.push(val[i]); 
 
      } 
 
     } 
 
     alert(tags); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="multiselect" method="post" action="foo.php"> 
 
    <select id="tags" name="tag_id[]" multiple="multiple"> 
 
\t <option value="1">Tag 1</option> 
 
\t <option value="2">Tag 2</option> 
 
\t <option value="3">Tag 3</option> 
 
\t <option value="4">Tag 4</option> 
 
\t <option value="5">Tag 5</option> 
 
    </select> 
 
    <input type="submit" name="submit" value="Send" class="button"> 
 
</form>

И тогда вы можете поместить этот массив в любом скрытый типа input, которые будут использоваться на стороне сервера.

Answer 2

Вам необходимо отслеживать заказ пользователя и отправить его вместе с данными выбора. Когда вы показываете теги, заказывайте поле, которое вы записали ранее.