jQuery Append UL with LI with value from dropdownlist on button click

Question

I have a dropdownlist:

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

I have a sortable list:

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

I have a button:

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

And the following script:

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


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

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

            });

        });

    </script>

When a user select something in the dropdown list and clicks Add I want that to get sent to the sortable list as an <li> with the class attribute etc, the dropdown to now show the 'Please Select' option.

Not sure the best approach to take. Thanks

Answer 1

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

should do the trick... (: