jQuery DropDownListとVice VersaからLIでLIを追加する

Question

私は値を持つドロップダウンリストを持っています。ボタンをクリックすると、順序付けられていないリストには、<li>が追加され、ドロップダウンリストの選択した項目の詳細が追加されます。

<li>はタグを持ち、<ul>から<li>を削除します。

<li>が削除されたときに、<ul>から削除されたアイテムをドロップダウンリストに再入力する必要があります。

アイデア？

UPDATE：すべてのあなたの助けを

感謝。ここに私の実装全体があります：

<script type="text/javascript"> 
     $(function() { 

      $("#sortable").sortable({ 
       placeholder: 'ui-state-highlight' 
      }); 


      $("#sortable").disableSelection(); 

      $('#btnAdd').click(function() { 

       if (validate()) { 
        //Remove no data <li> tag if it exists! 
        $("#nodata").remove(); 
        $("#sortable").append("<li class='ui-state-default' id='" + $("#ContentList option:selected").val() + "-" + $("#Title").val() + "'>" + $("#ContentList option:selected").text() + "<a href='#' title='Delete' class='itemDelete'>x</a></li>"); 
        $("#ContentList option:selected").hide(); 
        $('#ContentList').attr('selectedIndex', 0); 
        $("#Title").val(""); 
       } 
      }); 

      $('#btnSave').click(function() { 
       $('#dataarray').val($('#sortable').sortable('toArray')); 
      }); 

      $('.itemDelete').live("click", function() { 
       var id = $(this).parent().get(0).id; 
       $(this).parent().remove(); 
       var value = id.toString().substring(0, id.toString().indexOf('-', 0)); 

       if ($("option[value='" + value + "']").length > 0) { 
        $("option[value='" + value + "']").show(); 
       } 
       else { 
        var lowered = value.toString().toLowerCase().replace("_", " "); 
        lowered = ToTitleCase(lowered); 
        $("#ContentList").append("<option value='" + value + "'>" + lowered + "</option>"); 
       } 
      }); 

     }); 

     function validate() { 

      ... 

     } 

     function ToTitleCase(input) 
     { 
     var A = input.split(' '), B = []; 
     for (var i = 0; A[i] !== undefined; i++) { 
       B[B.length] = A[i].substr(0, 1).toUpperCase() + A[i].substr(1); 
      } 
     return B.join(' '); 
     } 

    </script> 
<form ...> 
<div class="divContent"> 



      <div class="required"> 
       <label for="ContentList">Available Sections:</label> 
       <select id="ContentList" name="ContentList"> 
        <option value="">Please Select</option> 
        <option value="CHAN TEST">Chan Test</option> 
        <option value="TEST_TOP">Test Top</option> 
       </select> 
       <span id="val_ContentList" style="display: none;">*</span> 
      </div> 

      <div class="required"> 
      <label for="ID">Title:</label> 
      <input class="inputText" id="Title" maxlength="100" name="Title" value="" type="text"> 

      <span id="val_Title" style="display: none;">*</span> 
      </div> 

      <input value="Add Section" id="btnAdd" class="button" type="button"> 
     </div> 

<ul id="sortable"> 
    <li class="ui-state-default" id="nodata">No WebPage Contents Currently Saved!</li>   
</ul> 

    <div> 
     <input type="submit" value="Save" id="btnSave" class="button"/> 
    </div> 

    <input type="hidden" id="dataarray" name="dArray" /> 


</form> 

Answer 1

あなたはjQueryについてほとんど知っていないことを認めていますので、この部分をいくつか見てみましょう。このスニペットは、ソリューションを構築するために必要な情報を提供します。

・イベントをクリックして追加することは比較的容易である：要素を削除する

$("#myButton").click(function(){ 
    /* code here */ 
}); 

も非常に簡単です：

$("#badThing").remove(); 

.removeについての事（）を使用すると、削除した後に他の場所でそれを追加することができますということですが、それ：＃badThingをどこからでも#someBoxの内側に移動します。

あなたはappendメソッドを使用して新しいリスト項目を追加することができます。

var item = $("#myDropDown option:selected");