jQuery的追加UL与李从按钮下拉列表值单击

Question

我有一个下拉列表：

<select id="ContentList" name="ContentList"> 
    <option value="">Please Select</option> 
    <option value="TEST_TOP">TEST TOP</option> 
</select> 

我有一个排序列表：

<ul id="sortable"> 
    <li class="ui-state-default">First</li> 
    <li class="ui-state-default">Second</li> 
    <li class="ui-state-default">Third</li> 
</ul> 

我有一个按钮：

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

而且下面的脚本：

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


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

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

      }); 

     }); 

    </script> 

当用户选择下拉列表中的某些内容并单击添加时，我希望将其作为具有类属性等的<li>发送到可排序列表，现在下拉菜单显示“请选择”选项。

不知道最好的方法服用。由于

Answer 1

$("#sortable").append("<li class='ui-state-default'>"+ 
          $("#ContentList option:selected").text()+"</li>"); 
$("#ContentList option:selected").remove(); 

应该做的伎俩...（：

Answer 2

工作演示here

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

    //cache sortable 
    var $sortable = $("#sortable"); 

    //clone sortables first li, change the text to that of the 
    //chosen option and append it to the sortable this saves having 
    //html embedded within the js 

    $sortable.children().eq(0) 
         .clone() 
         .text($('#ContentList').val()) 
         .appendTo($sortable); 

    // cache select options 
    var $items = $('#ContentList').children(); 

    //remove selected item 
    $items.filter(':selected').remove() 

    //set first option to be selected 
    $list.eq(0).attr('selected', true); 
});