Question

对象 - ＆＃34;物镜＆＃34;获得＆＃34; optgroup＆＃34;元素作为参数，它们的选项作为参数的值。但是，当选择两个optgroups的选项时，它将返回第一个optgroup中的所有选项值，并在控制台上保存先前选定的值，除非选择了当前optgroup的新值。

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

＆＃13;

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;
     }
});

＆＃13;

 /*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;}

＆＃13;

<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>

＆＃13;

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

Answer 1

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

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>

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

2 个答案: