Question

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

<li＆gt;其中包含<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内部。

您可以使用追加方法添加新的列表项：

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

您可以通过以下方式获取所选项目：

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

jQuery使用DropDownList和Vice Versa的LI追加UL

1 个答案: