元素顺序的 JavaScript/jQuery/jQuery UI 下拉选择

Question

我想为我的 CMS 应用程序中的元素排序创建一个 JavaScript/jQuery/jQuery UI 下拉选择。我一直在使用form 和select 元素，当select 元素更改时发布，但我需要将此功能应用于form 元素，并且尝试嵌套表单会产生各种问题。

我在想我可以在每个元素中添加一个这样的元素，然后从中构建某种控制：

<div class="order"
        data-action="[url to POST to]"
        data-return="[url to redirect to after POST]"
        data-max="[maximum order value, min assumed to be 1]">
    [value of current order]
</div>

我进行了一些搜索，但没有找到任何与我要查找的内容相似的内容。

---

更新

我发现这个jQuery SelectBox plugin 看起来不错，但它仍然需要表单元素位于源代码中。

从这个标记开始：

<div class="order"
        data-action="/block/order"
        data-return="/p/1/home#block_1"
        data-max="3">
    1
</div>

我希望 JavaScript 能做出这样的事情：

<div class="order"
        data-action="/block/order"
        data-return="/p/1/home#block_1"
        data-max="3">
    1
</div>
<ol class="orderSelect">
    <li class="selected">1</li>
    <li>2</li>
    <li>3</li>
</ol>

使用JavaScript / CSS使其表现类似于select元素，在选择另一个值时，请求POST请求。我不是在寻找 AJAX 解决方案。

我并不期待一个完整的解决方案，而是一个指向正确方向的指针。

Answer 1

哈哈，我的代码在工作中构建需要很长时间，所以不要担心我最后一个想法的长度！所以，我在想象一个页面充满了你的各种块，具有不同的值：

    <div class="order"
        data-action="/block/order"
        data-return="/p/1/home#block_1"
        data-max="3">
     1
     </div>

并且您希望这些块触发 JS 创建像这样的“东西”：

<ol class="orderSelect">
    <li class="selected">1</li>
    <li>2</li>
    <li>3</li>
</ol>

好的，下面的代码将为您指明如何制作所需的“ol”块的正确方向。

    <script>
    $(document).ready(function(){
    //only clone() these un-attached elements, or var re-use may go out the window
      var masterContainerObj = $("<ol class='orderSelect'></ol>");
      var masterContainerItemObj = $("<li></li>");
    //get all your div objects that have the data we want
      $(".order").each(function(index, elem){
        var newContainer = masterContainerObj.clone();
        var max = $(this).attr("data-max");
        for( var i = 1; i <=max; i++){
          var item = masterContainerItemObj.clone();
          item.text(i);
          if(i == $(this).text()){
            item.addClass("selected");
          }
/* add your data for this select item here, or, attach it to the newContainer, i leave that to you*/
          newContainer.append(item);
        }
        $(this).after(newContainer);
      });
    });
    </script>