Jquery 带optgroup的引导多选下拉列表

我的下拉列表如下

 <select class="selectpicker" multiple>
      <optgroup label="option 1">
         <option value="1">1</option>
         <option value="2">2</option>
         <option value="3">3</option>
         <option value="4">4</option>
      </optgroup>
      <optgroup label="option 2">
         <option value="2">2</option>
         <option value="3">3</option>
         <option value="4">4</option>
         <option value="5">5</option>
      </optgroup>
 </select>

试试这个

阿拉斯加州
夏威夷
加利福尼亚
内华达州
俄勒冈
华盛顿
var memoryOne；
$（“选项”）.mouseover（函数（）{
var selectedOne=$（（optgroup:nth of type（1）”）.children（“option:selected”）.index（）；
memoryOne=选择一个；
})。单击（函数（）{
var theSelectedIndex=$（this.index（）；
var theParentIndex=$（this.parent（）.index（）；
setTimeout（函数（）{
单击事件（所选索引、父索引、存储器等）；
}, 1);
});
函数clickEvent（传递索引、父索引、memoryOne、memoryTwo）{
var selectionOne=memoryOne；
var theParent=$（“optgroup:eq（“+parentIndex+”）；
var theOption=$（“optgroup:eq（“+parentIndex+”）选项：eq（“+passedIndex+”）；
var The祖父母=$（“选择”）；
parent.find（“选项：not（选项：eq（+passedIndex+”）））.prop（“selected”，false）；
}

不工作，event.added未定义，即使小提琴也不是multiselect，还有其他帮助吗？为什么必须是multiselect？当您仅从列表中选择一个时，在每个optgroup中，我可以选择多个，但是，当我在一个optgroup中选择任何一个或多个选项时，不应允许用户从第二个optgroup选项中选择任何选项，因为我建议使用包含（太平洋时区、阿拉斯加/夏威夷时区）的下拉列表然后，第二个下拉菜单触发第一个下拉菜单上的更改，并在第二个下拉菜单中填充其各个值。仍然困惑吗？

    $dropdown.on("changed.bs.select", "select", function (){
        var $option = $(this).find("option:selected", this); 
        var optGroup = $option.closest("optgroup").index(); 
     })

<select id="msel" style="width:300px">
 <optgroup label="Alaskan/Hawaiian Time Zone">
    <option value="AK">Alaska</option>
    <option value="HI">Hawaii</option>
 </optgroup>
 <optgroup label="Pacific Time Zone">
    <option value="CA">California</option>
    <option value="NV">Nevada</option>
    <option value="OR">Oregon</option>
  <option value="WA">Washington</option>
 </optgroup>
</select>

<script>
var memoryOne;

$("option").mouseover(function () {
    var selectedOne = $("optgroup:nth-of-type(1)").children("option:selected").index();
    memoryOne = selectedOne;
}).click(function () {
    var theSelectedIndex = $(this).index();
    var theParentIndex = $(this).parent().index();
    setTimeout(function () {
        clickEvent(theSelectedIndex, theParentIndex, memoryOne);
    }, 1);
});

function clickEvent(passedIndex, parentIndex, memoryOne, memoryTwo) {
    var selectionOne = memoryOne;

    var theParent = $("optgroup:eq(" + parentIndex + ")");
    var theOption = $("optgroup:eq(" + parentIndex + ") option:eq(" + passedIndex + ")");
    var theGrandParent = $("select");
    theParent.find("option:not(option:eq(" + passedIndex + "))").prop("selected", false);
}
</script>