JavaScript/jQuery/jQuery UI要素の順序のドロップダウン選択

Question

CMSアプリケーションで要素の順序付けのJavaScript/jQuery/jQuery UIドロップダウン選択を作成したいとします。私は、select要素が変更されたときに投稿するselect要素でformを使用していましたが、この機能をform要素に適用する必要があり、フォームのネストを試みるとさまざまな問題が発生します。

私は各要素に、次のように要素を追加し、それからの制御のいくつかの並べ替えを構築することができると考えていた

：

​​

私はいくつかの検索を行ってきたが、それは何も見つかっていません私が探しているものに似ています。私は良さそうに見えます。このjQuery SelectBox pluginを発見したが、それはまだソースにあるように、フォーム要素を必要と

---

UPDATE。

このマークアップを皮切り：

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

私はJavaScriptは、このようなものにするために期待する：POSTを作り、それがselect要素のように動作させるためにはJavaScript/CSSを使用して

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

を別の値が選択されたときに要求します。私はAJAXソリューションを探しているわけではありません。

私は完全な解決策を期待していませんが、正しい方向のポインタです。

Answer 1

haha​​、私のコードが職場で構築されるまでには時間がかかるので、最後のアイデアの長さについて心配しないでください！だから、私は別の値を使用して、ブロックのすべての種類の完全なページを想像しています：

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