按Ctrl选择多个项目并通过表单post访问

Ctrl select multiple items and access via form post

本文关键字：表单 post 访问 项目 Ctrl 选择      更新时间：2023-09-26

我有一个显示日期列表的表单-用户单击某一天，我使用jQuery填充一个隐藏字段，然后我可以在post数组中引用该值。

我现在想让用户通过使用Ctrl+Click选择一个以上的项目，然后能够访问所有选定的选项在张贴数组，但我不知道如何去做?

我已经弄清楚如何允许选择多个项目，但我无法弄清楚如何通过post访问此，因为我当前的代码仅包含隐藏字段中最后单击的项目。

这是我目前使用的:

var multiple = false;
$(document).on('keyup keydown', function(e) {
  multiple = e.ctrlKey;
});
$(document).ready(function () {
    $(document).on('click', '[name="day"]', function () {
        if (multiple) {
            $('[name="date"]').val($(this).text());
            $(this).addClass('selected');
        } else {
            $('[name="day"]').removeClass('selected');
            $('[name="date"]').val($(this).text());
            $(this).addClass('selected');
        }
    });
});
http://jsfiddle.net/z44Lvs48/1/

您当前使用的是$('[name="date"]').val($(this).text());，这意味着每次单击日期时，您都要替换输入中的值。

相反，您应该将附加到输入后，并用逗号分隔每个值。

所以改变:

$('[name="date"]').val($(this).text());

: 

$('[name="date"]').val($('[name="date"]').val() + ',' + $(this).text());

额外的$('[name="date"]').val()仅仅意味着增加当前值。

我在示例中删除了输入的'hidden'，这样你就可以看到我的意思了(此处更新了fiddle):

var multiple = false;
$(document).on('keyup keydown', function(e) {
  multiple = e.ctrlKey;
});
$(document).ready(function() {
  $(document).on('click', '[name="day"]', function() {
    if (multiple) {
      $('[name="date"]').val($('[name="date"]').val() + ',' + $(this).text());
      $(this).addClass('selected');
    } else {
      $('[name="day"]').removeClass('selected');
      $('[name="date"]').val($(this).text());
      $(this).addClass('selected');
    }
  });
});
.selected {
  background-color: red;
  color: white;
}
.base {
  float: left;
  height: 40px;
  width: 40px;
  margin-right: 10px;
  padding: 10px;
  border: 1px solid;
  cursor: pointer;
  text-align: center;
  border-radius: 5px;
  font-size: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="date">
<br>
<span id="days_disp"><div name="day" class="base wd selected"><span>Mon</span>
<br>05/10/2015</div>
<div name="day" class="base wd"><span>Tue</span>
  <br>06/10/2015</div>
<div name="day" class="base wd"><span>Wed</span>
  <br>07/10/2015</div>
<div name="day" class="base wd"><span>Thu</span>
  <br>08/10/2015</div>
<div name="day" class="base wd"><span>Fri</span>
  <br>09/10/2015</div>
<div name="day" class="base nwd"><span>Sat</span>
  <br>10/10/2015</div>
<div name="day" class="base nwd"><span>Sun</span>
  <br>11/10/2015</div>
</span>

然后您可以访问隐藏输入的值(val())并使用.split(',')(在每个逗号处分开)来形成一个日期数组，您可以在该数组上做任何您想做的事情。

相关文章：