Jquery - Seleccionar optgroup en seleccionar

Question

Tengo una selección con 2 grupos optg. ¿Hay alguna forma de llamar a una función solo si se selecciona una opción del primer grupo de opción y llamar a otra función si se selecciona una opción del segundo grupo de opción?

Answer 1

Sure.

HTML:

What is your preferred vacation spot?<br> 
<SELECT ID="my_select"> 

<OPTGROUP LABEL="OptGroup One." id="one">   
<OPTION LABEL="Florida">Florida</OPTION>   
<OPTION LABEL="Hawaii">Hawaii</OPTION>   
<OPTION LABEL="Jersey">Jersey Shore</OPTION>  
</OPTGROUP> 

<OPTGROUP LABEL="OptGroup Two" id="two"> 
<OPTION LABEL="Paris">Paris</OPTION> 
<OPTION LABEL="London">London</OPTION> 
<OPTION LABEL="Florence">Florence</OPTION> 
</OPTGROUP> 

</SELECT> 

JS:

$("#my_select").change(function(){ 
    var selected = $("option:selected", this); 
    if(selected.parent()[0].id == "one"){ 
     //OptGroup 1, do something here.. 
    } else if(selected.parent()[0].id == "two"){ 
     //OptGroup 2, do something here 
    } 
}); 

Ejemplo aquí: http://jsfiddle.net/pyG2v/

Answer 2

$('#selectID').change(function(){ 
    var $option = $('option:selected', this); // get selected option 
    var optGroup = $option.closest('optgroup').index(); // get which optgroup 
    if(optGroup == 0){ 
    // first 
    } 
    else if(optGroup == 1){ 
    // second 
    } 
    else{ 
    // not first or second 
    } 
}); 

Answer 3

Al hacer clic en la opción que reciben el nombre de ID de grupo de opciones.

var obj = {}; 
 
$('select[name=queue]').on('change', function() { 
 
    obj = {}; 
 
    var options = $('option:selected', this); //the selected options 
 
    $.each(options, function (index, 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>")); 
 
});

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