javascript - Ctrl 选择多个项目并通过表单发布访问

Question

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

我现在想允许用户使用 Ctrl+Click 选择多个项目，然后能够访问帖子数组中的所有选定选项，但我不确定如何去做？

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

这是我目前使用的:

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/

Answer 1

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

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

所以改变:

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

到:

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

额外的$('[name="date"]').val()只是意味着添加到当前值。

我已经删除了示例中输入的“隐藏”，因此您可以明白我的意思(updated fiddle here):

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(',') (在每个逗号处拆分)形成一个日期数组，您可以使用这些日期来做任何您想做的事情。