Question

我正在尝试在我的代码中安装一系列dropbox，dropbox的数量将在循环中决定。每个保管箱都会反映不同的日期，而保管箱中的每个选项都会反映不同的时间。

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

所以我的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这样做，并且在选择一天时禁用所有其他日期，但这会导致错误。请问有人可以给我一些帮助吗？

Answer 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
  });
});

如何处理多个同名的Dropbox？

1 个答案: