使用select2

Question

我想要一个包含某些类别的下拉菜单。每当我点击cetain类别时，我希望它展开并显示相应的子类别（如其他下拉列表中的下拉列表）。

我正在使用select2，我也希望它有一个搜索选项，所以最终看起来像这样：

到目前为止，这是一个小提琴：

FIDDLE

代码：

<label for="id_label_multiple">
  Click this to highlight the multiple select element
  <select class="js-example-basic-single  js-states form-control" id="id_label_multiple">
    <optgroup label="fruits1">
      <option>Apple1</option>
      <option>Apple2</option>
      <option>Apple3</option>
    </optgroup>
    <optgroup label="fruits2">
      <option>Apple4</option>
      <option>Apple5</option>
      <option>Apple6</option>
    </optgroup>
    <optgroup label="fruits3">
      <option>Apple7</option>
      <option>Apple8</option>
      <option>Apple9</option>
    </optgroup>
   </select>
</label>

 <script>
     $('#id_label_multiple').select2();
</script>

我怎样才能实现这个目标？