jQuery從DropDownList和Vice Versa追加UL和LI

我有一個帶有值的下拉列表。點擊按鈕後，無序列表會附上一個<li>，其中包含下拉列表中所選項目的詳細信息。jQuery從DropDownList和Vice Versa追加UL和LI

的<li>在其中具有<a>標籤，其將從<ul>除去<li>。

我需要在刪除<li>時刪除從<ul>刪除的項目，以重新填充下拉列表。

任何想法？

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>

來源

2009-07-13 Jon

這是連續第四個問題，你」 ve像這樣問... – Sampson 2009-07-13 15:15:45

顯示我是一個忙於小jQuery知識的蜜蜂。每次我獲得某些東西時，都會再次陷入困境。 – Jon 2009-07-13 15:17:29

你已經承認你對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");

來源

2009-07-13 15:25:38 Sampson

jQuery從DropDownList和Vice Versa追加UL和LI

回答

相關問題