jquery 多选 - 嵌套 <option>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8781905/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery multiselect - nested <option>
提问by niao
I'm using the following jquery plugin for selecting multiple options in my select control: jquery multiselect
我正在使用以下 jquery 插件在我的选择控件中选择多个选项：jquery multiselect
How can I achieve nested <option>here? I know it's possible because the rendered html uses <li>tags
我怎样才能<option>在这里实现嵌套？我知道这是可能的，因为呈现的 html 使用<li>标签
The case is that I want to have the similar result in my combobox:
情况是我想在我的组合框中有类似的结果：
[ ] England
[ ] London
[ ] Leeds
[ ] Manchaster
Does anyone have an idea how to achieve this kind of solution. Any help would be apprieciate.
有谁知道如何实现这种解决方案。任何帮助都会很感激。
回答by dknaack
Description
描述
Assuming i understand what you want you can do this using optgroup.
假设我明白你想要什么，你可以使用optgroup.
Check out this jsFiddle Demonstrationi have created for you.
查看我为您创建的这个jsFiddle 演示。
Sample
样本
<select multiple="multiple" size="5">
<optgroup label="England">
<option value="London">London</option>
<option value="Leeds">Leeds</option>
<option value="option3">Manchaster</option>
</optgroup>
<optgroup label="USA">
<option value="option4">New York</option>
<option value="option5">Chicago</option>
</optgroup>
</select>
More Information
更多信息
- jsFiddle Demonstration
- jQuery UI MultiSelect Widget
- jQuery UI MultiSelect Widget Demos
- vZHai - jQuery UI MultiSelect Widget
Update
更新
I have created a jsFiddle Demonstration.
我创建了一个jsFiddle 演示。
Complete working sample
完整的工作样本
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/jquery.multiselect.css">
<link rel="stylesheet" type="text/css" href="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/assets/style.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css">
<script type='text/javascript' src="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/src/jquery.multiselect.js"></script>
<script type='text/javascript'>//<![CDATA[
$(function(){
$("select").multiselect();
});
</script>
</head>
<body>
<select multiple="multiple" size="5">
<optgroup label="England">
<option value="London">London</option>
<option value="Leeds">Leeds</option>
<option value="option3">Manchaster</option>
</optgroup>
<optgroup label="USA">
<option value="option4">New York</option>
<option value="option5">Chicago</option>
</optgroup>
</select>
</body>
</html>
Update after an intensive discussion with niao, who ended with
与 niao 深入讨论后更新，niao 以
niao:yes, that's what I need. I will have to add some css to make it looks pretty. You can append your answer and I will be more than happy to accept it
niao：是的，这就是我需要的。我将不得不添加一些 css 以使其看起来很漂亮。你可以附上你的答案，我会很乐意接受它
You can see the result in this jSFiddle.
你可以在这个jSFiddle 中看到结果。
I encourage you to download the resources (javascript and css files) to put that on your enviroment.
我鼓励您下载资源（javascript 和 css 文件）以将其放在您的环境中。
Full working sample
完整的工作样本
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script src="http://wwwendt.de/tech/dynatree/jquery/jquery.js" type="text/javascript"></script>
<script src="http://wwwendt.de/tech/dynatree/jquery/jquery-ui.custom.js" type="text/javascript"></script>
<script src="http://wwwendt.de/tech/dynatree/jquery/jquery.cookie.js" type="text/javascript"></script>
<link href="http://wwwendt.de/tech/dynatree/src/skin/ui.dynatree.css" rel="stylesheet" type="text/css" id="skinSheet">
<script src="http://wwwendt.de/tech/dynatree/src/jquery.dynatree.js" type="text/javascript"></script>
<script type="text/javascript">
var treeData = [
{title: "England", key: "England", expand: true,
children: [
{title: "Region", key: "Region", activate: true, expand:true,
children: [
{title: "London", key: "London" },
{title: "Leeds", key: "Leeds" }
]
}
]
}
];
$(function(){
$("#tree3").dynatree({
checkbox: true,
selectMode: 3,
children: treeData,
onSelect: function(select, node) {
// Get a list of all selected nodes, and convert to a key array:
var selKeys = $.map(node.tree.getSelectedNodes(), function(node){
return node.data.key;
});
$("#displayText").val(selKeys.join(", "));
},
onDblClick: function(node, event) {
node.toggleSelect();
},
onKeydown: function(node, event) {
if( event.which == 32 ) {
node.toggleSelect();
return false;
}
},
});
$("#opener").click(function() {
var tree = $("#tree3");
if (tree.css("display") == "none")
{
tree.css("display", "block")
} else {
tree.css("display", "none");
}
});
});
</script>
</head>
<body class="example">
<div style="width: 500px;">
<div>
<input readonly="true" type="text" id="displayText" style="float:left;width:470px"/>
<input type="button" id="opener" style="width:1px"/>
</div>
<div style="display:none" id="tree3"></div>
</div>
</body>
</html>
回答by c4urself
You can use an optgroupto achieve exactly this effect, when optgroup is clicked (for example "England") in this case, all options under it are selected. See a demo here.
您可以使用 anoptgroup来实现这种效果，在这种情况下，当单击 optgroup（例如“England”）时，将选择其下的所有选项。在此处查看演示。
