如何實現C＃中的Dropbox列表

Question

我目前正在使用ASP.NET的C＃項目。我想要實現一個Dropbox的列表。因此，用戶從保管箱開始，可以選擇一種方法，並且在保管箱旁邊是一個+和 - 按鈕，使用戶可以添加更多保管箱。所以我想知道如何才能實現這是可以在ASP.NET中構建一個Dropbox列表？

Answer 1

您不需要任何服務器端代碼，客戶端腳本是您需要的理想解決方案。

有這樣的HTML：

<div id="MainPlaceholder"> 
    <div id="DropDownPlaceholder"> 
     <select name="myDropDown"> 
      <option value="1">First</option> 
      <option value="2">Second</option> 
      <option value="3">Third</option> 
     </select> 
     <button type="button" onclick="AddDropDown(this);">+</button> 
     <button type="button" onclick="RemoveDropDown(this);">-</button> 
    </div> 
</div> 

您需要以下純JavaScript，使其工作：

<script type="text/javascript"> 
var added_counter = 0; 

function AddDropDown(sender) { 
    var parent = sender.parentNode; 

    //make fresh clone: 
    var oClone = parent.cloneNode(true); 

    //append to main placeholder: 
    parent.parentNode.appendChild(oClone); 

    //store change in global variable: 
    added_counter++; 
} 

function RemoveDropDown(sender) { 
    //don't allow to remove when there is only one left 
    if (added_counter <= 0) { 
     alert("One drop down must exist"); 
     return; 
    } 

    var parent = sender.parentNode; 

    //disable so value won't be passed when form submitted: 
    parent.getElementsByTagName("select")[0].disabled = true; 

    //hide: 
    parent.style.display = "none"; 

    //store change in global variable: 
    added_counter--;  
} 
</script> 

的代碼有意見，但如果你需要任何進一步的解釋，請隨時提問。

Live test case。

編輯：當你需要閱讀在服務器端代碼中選擇的值，更好的方法是改變每個克隆下降的名字了下來：

var totalAddedCounter = 0; 

function AddDropDown(sender) { 
    var parent = sender.parentNode; 

    //make fresh clone: 
    var oClone = parent.cloneNode(true); 

    //assign unique name: 
    oClone.getElementsByTagName("select")[0].name += "_" + totalAddedCounter; 

    //append to main placeholder: 
    parent.parentNode.appendChild(oClone); 

    //store change in global variable: 
    added_counter++; 
    totalAddedCounter++; 
} 

現在棘手的問題是閱讀那些值。除了純dropboxlistID.Text你將不得不遍歷所有公佈值尋找你所需要的：

foreach (string key in Request.Form.Keys) 
{ 
    if (key.StartsWith("dropboxlistID")) 
    { 
     string text = Request.Form[key]; 
     //..... 
    }