在多个< select>列表 [英] Wrapping text within a multiple <select> list
问题描述
我想给予用户选择多个元素的能力（每个元素都是一个段落）。问题是，html中的标准选择倍数（根据我可以告诉）每个选择一行。这是一个问题，因为布局变得非常困难，如果我让线长。此外，如果我只是截断行，文本的主要要点丢失。有没有办法解决这个javascript？是否有一个替代方法允许显示所有文本并将返回的值返回冒号分隔列表？
I want to give the user the ability to select multiple elements (which happen to be about a paragraph each). The problem is that a standard select multiple in html is (as far as I can tell) a single line per choice. This is a problem as the layout gets very screwy if I let the line go long. Also, if I just truncate the line, the main gist of the text is lost. Is there a way to get around this with javascript? Is there an alternative that allows all of the text to be displayed and return the values back in a colon delimited list?
推荐答案
有很多方法可以做到这一点。最简单的方法是在每个段落旁边放一个复选框。
There are a lot of ways you could do this. The most straightforward would be to just put a checkbox next to each paragraph. The user can check the boxes next to the paragraphs of his choosing.
如果你有一个更平滑的界面，你可以通过用CSS隐藏复选框来扩展这个想法，然后使用JavaScript来，当相应的段落被点击时选中复选框，并且突出显示该段落（通过应用CSS类）以将其显示为选中。像jQuery这样的框架会很好地简化这个过程。
If you have a smoother interface in mind, you can extend that idea by hiding the checkboxes with CSS, then using JavaScript to make the checkboxes selected when the corresponding paragraph is clicked and highlight the paragraph (by applying a CSS class) to show it as selected. A framework like jQuery will streamline this process nicely.
编辑：现在我想到了，只要把每个段落放在< label> 元素你甚至不需要JavaScript来检查/取消选中隐藏的复选框;只要标签的属性设置正确，就会自动发生。
Now that I think of it, as long as you put each paragraph in a <label> element you don't even need JavaScript to check/uncheck the hidden checkboxes; that will happen automatically as long as the label's for attribute is set correctly. All you need JavaScript for is to highlight/unhighlight the labels.
这里是一个使用jQuery的天真的实现：
Here's a naive implementation using 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>列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
