Description
Assuming I understand what you want, you can do this using optgroup .
Check out the jsFiddle demo I created for you.
Example
<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>
Additional Information
Update
I created a jsFiddle demo .
Full 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 intense discussion with niao that ended
niao: yes, that is what I need. I need to add CSS to make it look pretty pretty. You can add your answer, and I will be more than happy to accept it
You can see the result in jSFiddle .
I recommend that you download resources (javascript and css files) to add them to your environment.
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>