在多個文本中包裝文本<select>列表

我想讓用戶能夠選擇多個元素（每個元素恰好是一個段落）。問題是，在html中的標準選擇倍數是（據我所知）每個選擇一行。這是一個問題，因爲如果我讓線路變長，佈局變得非常棘手。另外，如果我只是截斷線條，文本的主要內容就會丟失。有沒有辦法解決這個與JavaScript？是否有替代方法允許顯示所有文本並將值返回到冒號分隔列表中？在多個文本中包裝文本<select>列表

來源

2009-11-24 jle

有很多方法可以做到這一點。最簡單的方法是在每個段落旁邊放一個複選框。用戶可以選中他選擇的段落旁邊的框。

如果你心裏有一個平滑的界面，您可以通過隱藏複選框使用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>

來源

2009-11-24 03:51:26

+1。即使沒有JS框架，實現起來也會很容易。 – bobince 2009-11-24 04:13:53

在多個文本中包裝文本<select>列表

回答

相關問題