如何处理多个同名的保管箱？答案

【问题标题】：How to handle multiple dropboxes of the same name?如何处理多个同名的保管箱？
【发布时间】：2012-04-04 06:43:24
【问题描述】：

我试图在我的代码中包含一系列保管箱，保管箱的数量将在循环中确定。每个保管箱反映不同的一天，保管箱中的每个选项反映不同的时间。

用户只能选择其中一个时间，以便继续传递。

所以我的 HTML 将如下所示：

<form id="form" name="form" method="post" action="confirmation.cshtml">
   <select name="start_to_end_time" class="start_to_end_time">
      <option value="1">1</option>
      <option value="2">2</option>
   </select>

   <select name="start_to_end_time" class="start_to_end_time">
      <option value="3">3</option>
      <option value="4">4</option>
   </select>

   <button type="submit">Submit</button>
</form>

带有可变数量的标签。我最好的处理和验证方法是什么？我曾尝试使用 JavaScript 这样做，并在选择某一天时禁用所有其他日子，但这会导致错误。谁能帮我解决这个问题？

【问题讨论】：

如果您的尝试导致“错误”，您应该让我们知道错误是什么！
您还需要更改操作。 1. MVC 指向控制器动作，而不是视图 2. 客户端不了解服务器技术。
命名约定有效。它将创建一个数组。 id 必须是唯一的，但对于简单值和 ms mvc 框架，名称可以重复。
您还需要更改操作。动作应该指向一个控制器方法，而不是一个视图。并且浏览器不知道所选择的服务器技术。它不知道 Razor 模板引擎是什么。
恕我直言，最好的方法是不要为所有下拉菜单提供相同的名称。如果做不到这一点，您至少可以给他们不同的 ID。

标签： c# javascript jquery html validation

【解决方案1】：

我选择了不同的路线。我选择将一个类添加到我正在处理的选择列表中，并隐藏其他类。然后我选择捕获表单提交，并在发布时监控表单中保存的对象数量。如果对象的数量大于或小于 1，那么我选择提供警报，告诉他们使用表单；否则，如果长度等于 1，则处理表单。我还注释掉了一个示例 ajax 请求，展示了如何将数据传输到您的控制器。我认为这就是你想要做的——或者类似的事情？我可能是错的，如果我错了，我会更正！

http://jsfiddle.net/y6zLQ/4/

长期目标

$(function(){
  $("select").on('click', function(){
    //add a unique class identifier
    $(this).addClass('working');
    $("select:not('.working')").hide(100);
  });  
  $("#form").submit(function(e){
    e.preventDefault(); // stop default form submission
    var visLength = $("select:visible").length; //how many select fields are visible?
    if(visLength > 1 || visLength < 1){//if we have more/less than 1 visible field.
      alert('Please choose a value from the lists provided.');      
    }else if(visLength == 1){//we only have one field, proceed.
      var visValue = $("select:visible").val();
      alert(visValue);
     // $.ajax({
     //     url: 'confirmation.cshtml'      
     //     data: 'selectVal='+visValue,
     //     success: function(data){
     //       //do something with our returned data.
     //       $("#someElement").html(data);
     //       //or don't. Perhaps you want to change the page.
     //       window.location = 'mywebsite.com/newlocation';
     //     }
     // });
    }
  });    
  //build a reset function so they can choose a different date.    
  $("#reset").click(function(e){
    e.preventDefault(); // stop default form submission
    $("select").removeClass('working'); //remove unique class identifier
    $("select").show(100); //show other selec tlists
  });
});

【讨论】：