JQuery Add UL with LI with value from dropdown on button click

Question

I have a drop down list:

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

I have a sorted 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 the user selects something from the drop-down list and clicks “Add”, I want it to be sent to the sorted list as <li> with the class attribute, etc., the option “Please choose” is now displayed in the drop-down list.

Not sure what works best. Thanks

Answer 1

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

should do the trick ... (:

Answer 2

working demo 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); });