title: How to populate jquery treeselect widget?
body: <p>I am having trouble with populating this jquery treeselect widget with a json file (or anything) I am new to jquery/javascript so I am probably missing some fundamentals.</p>
  
  <p>I have the plugin from <a href="https://github.com/travist/jquery.treeselect.js" rel="nofollow">https://github.com/travist/jquery.treeselect.js</a> and have found no example of how to load it up.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
  &lt;head&gt;
      &lt;script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"&gt;&lt;/script&gt;
      &lt;script type='text/javascript' src='js/jquery.moreorless.js'&gt;&lt;/script&gt;
      &lt;script type='text/javascript' src='js/jquery.treeselect.js'&gt;&lt;/script&gt;
      &lt;script type='text/javascript' src='js/jquery.chosentree.js'&gt;&lt;/script&gt;
  
      &lt;link rel='stylesheet' type='text/css' href='css/moreorless.css'/&gt;
      &lt;link rel='stylesheet' type='text/css' href='css/treeselect.css'/&gt;
      &lt;link rel='stylesheet' type='text/css' href='css/chosen.css'/&gt;
      &lt;script type='text/javascript'&gt;
          jQuery(function () {
  
              var data1 = ["EVENT1", "EVENT2"];
              var data2 = [{
                  "id": 1,
                  "name": "A green door"
              },
                  {
                      "id": 2,
                      "name": "A blue door"
                  }
              ]
  
              $('div.chosentree').chosentree({
                  width: 200,
                  deepLoad: true,
                  default_value: data2, // does not work 
                  load: function (node, callback) {
  
                      // What do I put here?
                      /**
                       * This would typically call jQuery.ajax to load a new node
                       * on your server where you would return the tree structure
                       * for the provided node.
                       */
                  }
              });
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="chosentree"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>