將文字換成多個 <select>名單

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

問題描述

1 個解決方案

解決方案1
6 已采納 2009-11-24 03:51:26

將文字換成多個 <select>名單

問題描述

1 個解決方案

解決方案1 6 已采納 2009-11-24 03:51:26

解決方案1
6 已采納 2009-11-24 03:51:26