jQuery Append UL with LI from DropDownList and Vice Versa

Question

I have a dropdownlist with values. On a click of a button a unordered list gets appended with an <li> with details from the selected item in the dropdown list.

The <li> has an <a> tag in it which will remove the <li> from the <ul>.

I need to repopulate the dropdown list with the item removed from the <ul> when the <li> is removed.

Any ideas?

UPDATE:

Thanks for all your help. Here is my whole implementation:

<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

You've acknowledged that you know very little about jQuery, so let's look at some of this piece by piece. This snippets will give you the information you need to construct your solution.

Adding click-events is relatively easy:

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

Removing elements is also pretty simple:

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

The thing about .remove() though is that you can add it elsewhere after removing it:

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

That moves #badThing from wherever it was, to the inside of #someBox.

You can add new list items with the append method:

$("#myList").append("<li>My New Item</li>");

You can get the selected item of a drop-down like this:

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