Question

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

我现在想要允许用户使用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()只是意味着要添加到当前值。

我已删除了隐藏的＆＃39;对于示例中的输入，您可以看到我的意思（updated fiddle here）：

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

然后，您可以访问隐藏输入的值（val()）并使用.split(',')（在每个逗号处拆分）以形成一系列日期，您可以使用这些日期来完成无论你想做什么。

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

1 个答案: