jQuery Добавить UL с LI из DropDownList и наоборот

Question

У меня есть выпадающий список со значениями. При нажатии кнопки к неупорядоченному списку добавляется <li> с подробностями из выбранного элемента в раскрывающемся списке.

В <li> есть тег <a>, который удалит <li> из <ul>.

Мне нужно заполнить раскрывающийся список элементом, удаленным из <ul> при удалении <li>.

Есть идеи?

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, поэтому давайте рассмотрим некоторые из этих фрагментов по частям. Этот фрагмент предоставит вам информацию, необходимую для построения вашего решения.

Добавление click-событий относительно просто:

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

Удаление элементов также довольно просто:

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

Суть .remove () в том, что вы можете добавить его в другом месте после его удаления:

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

Это перемещает #badThing от того места, где оно было, внутрь # someBox.

Вы можете добавить новые элементы списка с помощью метода добавления:

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

Вы можете получить выбранный элемент раскрывающегося списка следующим образом:

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