javascript - jQuery 在 DropDownList 中附加 UL 和 LI，反之亦然

Question

我有一个包含值的下拉列表。单击按钮后，无序列表将附加 <li>包含下拉列表中所选项目的详细信息。

<li > 有一个<a>其中的标签将删除 <li>来自<ul> .

我需要使用从 <ul> 中删除的项目重新填充下拉列表。当 <li>已删除。

有什么想法吗？

更新:

感谢您的所有帮助。这是我的整个实现:

<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 知之甚少，所以让我们一点一点地看一下其中的一些内容。此片段将为您提供构建解决方案所需的信息。

添加点击事件相对容易:

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

删除元素也非常简单:

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

关于 .remove() 的问题是，您可以在删除它后将其添加到其他地方:

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

这会将 #badThing 从原来的位置移动到 #someBox 的内部。

您可以使用append方法添加新的列表项:

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

您可以像这样获取下拉列表中的所选项目:

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