I'm using the following jquery plugin for selecting multiple options in my select control: jquery multiselect

How can I achieve nested <option> here? I know it's possible because the rendered html uses <li> tags

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.

  • 1
    Have you looked at this page: erichynds.com/examples/jquery-ui-multiselect-widget/demos ? – rcdmk Jan 8 '12 at 22:32
  • What do you want to say with nested <option>? Option groups? Indented options? – rcdmk Jan 8 '12 at 22:33
  • I updated my question – Piotr Ptak Jan 8 '12 at 22:36
  • I think what he wants is when the user select London it automatically selects England too. – Jean-Philippe Gire Jan 11 '12 at 10:59
  • means you want that if you check on england then all region under england should be selected. am i getting you right?? – diEcho Jan 11 '12 at 10:59
up vote 9 down vote accepted
+100

Description

Assuming i understand what you want you can do this using optgroup.

Check out this jsFiddle Demonstration i have created for you.

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

Update

I have created a jsFiddle Demonstration.

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: 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

You can see the result in this jSFiddle.

I encourage you to download the resources (javascript and css files) to put that on your enviroment.

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>
  • but I need a checkbox in my optgroup also so, next to the "England" and "USA" – Piotr Ptak Jan 11 '12 at 11:32
  • The items get checked too, if you click on "England" – dknaack Jan 11 '12 at 11:34
  • I know, but I need to have "checkbox" control there. So when I click the checkbox next to the "England", all children will also be checked. – Piotr Ptak Jan 11 '12 at 11:40
  • The problem why this is not possible is, after check you check "England" all childs would be selected too, fine so far. But if you send the form to, for example, the server you will get all checked results and this makes no sense. I will create you a plugin if you want but this is not how you should handle that. – dknaack Jan 11 '12 at 11:47
  • The case is that those countries/regions have a specific Ids that I need to have in order to use it with the third-party-web-service. Unfortunately this service is created in a way where calling Find method with England Id will return different results than calling method with England's regions Ids. Therefore, I need to have such combobox in <optgroup>. can you create such plugin for me? – Piotr Ptak Jan 11 '12 at 12:03

You can use an optgroup to achieve exactly this effect, when optgroup is clicked (for example "England") in this case, all options under it are selected. See a demo here.

Your Answer

 

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.