使用jQuery重新排序div然后使用表单提交

Question

我使用jQuery对项目进行排序，它的工作原理非常好，但是如何使用DIV和表单动作发布来提交最终订单？

我知道如何与复选框这样做...

<?php 
    if(isset($_POST["resortable-option"])){ 
     foreach($_POST["resortable-option"] as $item){ 
     echo $item."<br>"; 
     } 
    } 
?> 

....

<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post"> 
    <ol id="sortable"> 
    <li><label for=""><input type="checkbox" name="resortable-option[]" value="1">Option 1</label></li> 
    <li><label for=""><input type="checkbox" name="resortable-option[]" value="2">Option 2</label></li> 
    <li><label for=""><input type="checkbox" name="resortable-option[]" value="3">Option 3</label></li> 
    <li><label for=""><input type="checkbox" name="resortable-option[]" value="4">Option 4</label></li></ol> 
    <input type="submit" value="send"> 
</form> 

这适用于复选框完全正常，但如果我只是想使用常规的DIV，而只是传递div的innerText或innerHtml？例如，如果我有...

<ol id="sortable"> 
    <li><label for=""><div name="resortable-option[]">Option 1</label></li> 
    <li><label for=""><div name="resortable-option[]">Option 2</label></li> 
    <li><label for=""><div name="resortable-option[]">Option 3</label></li> 
    <li><label for=""><div name="resortable-option[]">Option 4</label></li></ol> 

然后当我点击提交，将提交他们，他们被reorderd这样我就可以追上后...

Option 1 
Option 2 
Option 3 
Option 4 

与顺序输出回波他们被重新排序。

Answer 1

我知道如何组装幕后的HTML表单并提交的方式，唯一的方法：

$(document).ready(function(){ 
    $('#submit').click(function(){ 
     // I'll use this as a class selector and as the name for the form attr 
     var inputName = 'resortable-option'; 
     // Get all elements with the class 
     var getFields = $('.'+inputName); 
     // Start the form 
     var post  = ['<form action="/test.php" method="post">']; 
     // Loop through the divs 
     $.each(getFields,function(k,v) { 
      // Create inputs 
      post.push('<input name="'+inputName+'['+k+']" value="'+$(v).text()+'" />'); 
     }); 
     // Add an ending to the form 
     post.push('</form>'); 
     // String the array together and submit 
     $(post.join('')).submit(); 
    }); 
}); 
</script> 

<ol id="sortable"> 
    <li><label for=""><div class="resortable-option">Option 1</div></label></li> 
    <li><label for=""><div class="resortable-option">Option 2</div></label></li> 
    <li><label for=""><div class="resortable-option">Option 3</div></label></li> 
    <li><label for=""><div class="resortable-option">Option 4</div></label></li> 
</ol> 
<div id="submit">SUBMIT</div>