如何找到所选选项的 optgroup 元素的正确索引？

Question

Object-“obj”将“optgroup”元素作为参数，将它们的选项作为参数的值。 But when options of both optgroups are selected it returns all option values in first optgroup and on console it saves the previous selected value unless new value for current optgroup is selected.

很快我需要一个对象来仅存储 optgroup 和所选选项的选项，一旦选择更改以使用新的所选数据恢复其所有数据。

var obj = {};
$('select[name=queue]').on('change', function(){
 var options = $('option:selected', this); //the selected options
 var optgroupIndex = options.closest('optgroup').index() //get the index
 var optgroupId = options.parent()[0].id //get id
 switch(optgroupIndex){
         case 0:
         case 1:
              $('#demo').text(optgroupId +": " + $('select[name=queue]').val());
             obj[optgroupId] = $('select[name=queue]').val()
             console.log(obj)
             break;
     }
});

 /*Additional*/
select::-webkit-scrollbar {display:none;}
select::-moz-scrollbar {display:none;}
select::-o-scrollbar {display:none;}
select::-google-ms-scrollbar {display:none;}
select::-khtml-scrollbar {display:none;}
select{height:150px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name='queue' multiple> 
<optgroup label="Frist Queue" id="Frist Queue">
<option value="Person1">Person1</option>         
<option value="Person2">Person2</option>         
<option value="Person3">Person3</option>    
</optgroup>
<optgroup label="Second Queue" id="Second Queue">  
<option value="Person1">Person1</option>  
<option value="Person2">Person2</option> 
</optgroup>
</select>

<div id="demo"></div>

如果选择了第二个 optgroup 中的选项，则对象应仅存储第二个 opgroup 作为其参数，并将所选选项存储为该参数的值

Answer 1

您需要迭代选定的选项以检索每个选项的 optgroup，然后将选项存储在 obj 对象中的 optgroupId : [value,...] 结构中，以允许多个值。

var obj = {};
$('select[name=queue]').on('change', function () {
    obj = {};
    var options = $('option:selected', this); //the selected options
    $.each(options, function (index, option) {
        var $option = $(option);
        var optgroupIndex = $option.closest('optgroup').index() //get the index
        var optgroupId = $option.parent()[0].id //get id
        if (obj.hasOwnProperty(optgroupId)) {
            obj[optgroupId].push($option.val());
        } else {
            obj[optgroupId] = [$option.val()];
        }
    });
    var textRows = [];
    $.each(obj, function(optgroupId, values){
        textRows.push(optgroupId +": " + values.join(', '));
    });
    $('#demo').html(textRows.join("<br>"));
});

请参阅working example。

Answer 2

我猜你应该在每次选择更改时重置 obj：

 var obj = {};
$('select[name=queue]').on('change', function(){
 obj = {};
 var options = $('option:selected', this); //the selected options
 var optgroupIndex = options.closest('optgroup').index() //get the index
 var optgroupId = options.parent()[0].id //get id
 switch(optgroupIndex){
         case 0:
         case 1:
              $('#demo').text(optgroupId +": " + $('select[name=queue]').val());
             obj[optgroupId] = $('select[name=queue]').val()
             console.log(obj)
             break;
     }
});

 /*Additional*/
select::-webkit-scrollbar {display:none;}
select::-moz-scrollbar {display:none;}
select::-o-scrollbar {display:none;}
select::-google-ms-scrollbar {display:none;}
select::-khtml-scrollbar {display:none;}
select{height:150px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name='queue' multiple> 
<optgroup label="Frist Queue" id="Frist Queue">
<option value="Person1">Person1</option>         
<option value="Person2">Person2</option>         
<option value="Person3">Person3</option>    
</optgroup>
<optgroup label="Second Queue" id="Second Queue">  
<option value="Person1">Person1</option>  
<option value="Person2">Person2</option> 
</optgroup>
</select>

<div id="demo"></div>