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

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");