Chosen和heapbox插件无法在页面上运行

Question

我有一个表格，有两个下拉菜单。在第一个下拉列表中，我正在使用heapbox，在第二个下拉列表中，我使用的是选择的插件，代码如下所示：

<select class="gender">
    <option value="male">male</option>
    <option value="female">female</option>
</select>

<select multiple="multiple" class="chosen-select">
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
    <option value="four">Four</option>
</select>

<script type="text/javascript">
    $("select.gender").heapbox({});
    $(".chosen-select").chosen();
</script>

以上代码工作正常。 Heapbox和选择的插件工作但是在选择了下拉列表中的所有字段然后我点击选择下拉列表，它显示禁用所有选项，如果我点击其中一个然后这个下拉列表没有关闭。它仍然是附加的屏幕截图。

1. 最初显示表单为http://i.imgur.com/3l7EYEk.png

2. 现在我从所选下拉列表中选择第一个选项http://i.imgur.com/l2OEmZx.png

3. 然后我选择第二个选项为http://i.imgur.com/VyfAEIh.png

4. 同样为http://i.imgur.com/CWl7eJQ.png

的第三和第四选项

5. 然后我点击选定的下拉菜单，显示为http://i.imgur.com/zXrfC74.png

现在，如上所述，此禁用下拉菜单中的5表示未关闭。 我该如何解决这个问题。