Question

我想让用户能够选择多个元素（恰好是每个元素的一个段落）。问题是html中的标准选择倍数（据我所知）每个选择一行。这是一个问题，因为如果让线路变长，布局变得非常棘手。此外，如果我只是截断该行，文本的主要要点就会丢失。有没有办法用javascript解决这个问题？是否有替代方法允许显示所有文本并将值返回到冒号分隔列表中？

Answer 1

有很多方法可以做到这一点。最直接的方法是在每个段落旁边放一个复选框。用户可以选中他选择的段落旁边的框。

如果你有一个更顺畅的界面，你可以通过隐藏CSS复选框来扩展这个想法，然后使用JavaScript ~~在单击相应的段落时选中复选框并~~突出显示段落（通过应用CSS类）将其显示为选中。像jQuery这样的框架可以很好地简化这个过程。

编辑现在，我想起来了，只要您将每个段落放在<label>元素中，您甚至不需要JavaScript来检查/取消选中隐藏的复选框;只要标签的for属性设置正确，它就会自动发生。您需要的所有JavaScript都是突出显示/取消突出显示标签。

这是一个使用jQuery的简单实现：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
  input.hidden-checkbox { display: none; }
  label.multi-select { display: block; cursor: pointer; }
  label.checked { background-color: #ddd; }
</style>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">  
  $(document).ready(function() {
    $('input.hidden-checkbox').bind('change', function(e) {
      var checkBox = $(e.target),
          label = $('label[for=' + checkBox.attr('id') + ']');

      if(label) {
        if(checkBox.attr('checked')) {
          label.addClass('checked');
        } else {
          label.removeClass('checked');
        }
      }
    });
  });
</script>
</head>
<body>

<form>
  <input  type="checkbox" value="1"
          name="paragraph[]" id="paragraph-1"
          class="hidden-checkbox"/>
  <label for="paragraph-1" class="multi-select">Text of paragraph 1.
    As long as you want. Lorem ipsum dolor sit amet...</label>

  <input  type="checkbox" value="2"
          name="paragraph[]" id="paragraph-2"
          class="hidden-checkbox" class="multi-select" />
  <label for="paragraph-2" class="multi-select">Paragraph 2's text.
    Lorem ipsum dolor sit amet...</label>

  <!-- ...etc... -->
</form>
</body>
</html>

在多个<select>列表中包装文本</select>

1 个答案: