CODEWITHSUNDEEP
javascriptjquery
RegarBoy
RegarBoy

Reputation: 3521

How to find the proper index of optgroup element of selected options?

Object-"obj" gets the "optgroup" elements as parameters and their options as values to the parameters. 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.

Shortly I need an object to store only optgroup and options of selected options, once select is changes to restore all its data with new selected data. 

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>
If option from second optgroup is selected then object should store only second opgroup as its parameter and the selected options as value to that parameter

Upvotes: 0

Views: 649

Answers (2)

Andrea Casaccia
Andrea Casaccia

Reputation: 4971

You need to iterate on the selected options to retrieve the optgroup of each, then store the options in your obj object in a optgroupId : [value,...] structure, to allow for multiple values.

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

See the working example.

Upvotes: 1

MoLow
MoLow

Reputation: 3084

I guess you should reset obj every time the selection changes:

 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>

Upvotes: 0

Related Questions