jquery multiselect - 嵌套<option> </option>

时间:2012-01-08 22:25:01

标签: jquery select option

我正在使用以下jquery插件在我的选择控件中选择多个选项:jquery multiselect

如何在此处实现嵌套<option>?我知道这是可能的,因为渲染的html使用<li>标签

案例是我希望在我的组合框中得到类似的结果:

[ ] England
   [ ] London
   [ ] Leeds
   [ ] Manchaster

有没有人知道如何实现这种解决方案。任何帮助都会很有帮助。

2 个答案:

答案 0 :(得分:9)

描述

假设我明白你想要什么,你可以使用optgroup

查看我为您创建的jsFiddle Demonstration

示例

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

更多信息

更新

我创建了一个jsFiddle Demonstration

完整的工作样本

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

与niao进行深入讨论后更新,niao以

结束
  

niao:是的,这就是我需要的。我将不得不添加一些CSS,使它看起来很漂亮。你可以追加你的答案,我将非常乐意接受它

您可以在 jSFiddle 中看到结果。

  

我鼓励您下载资源(javascript和css文件)以将其放在您的环境中。

完整的工作样本

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

答案 1 :(得分:0)

您可以使用optgroup来实现这种效果,在这种情况下点击optgroup(例如“英格兰”)时,会选择其下的所有选项。请参阅a demo here