如何实现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]; 
     //..... 
    }