Jquery – Select in select optgroup

Habe ich ein select mit 2 optgroups. Gibt es eine Möglichkeit zum aufrufen einer Funktion nur, wenn eine option aus dem ersten optgroup ausgewählt ist und eine andere Funktion aufrufen, wenn eine option aus dem zweiten optgroup ausgewählt ist?

InformationsquelleAutor user495915 | 2011-03-29
  1. 28

    Sicher.

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

    Beispiel hier: http://jsfiddle.net/pyG2v/

    • Erstaunlich. Der code sieht so klar und einfach, aber ich kämpfte so sehr auf, dass man. Danke!
    • +1 schneller als ich.
    InformationsquelleAutor mattsven
  2. 1
    $('#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
  }
});
    InformationsquelleAutor Rocket Hazmat
  3. 0

    Wenn Sie klicken Sie auf die option, die Sie erhalten die Id-Namen der Optionsgruppe.

    JS:

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

    CSS:

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

    HTML:

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

    InformationsquelleAutor RegarBoy
Schreibe einen Kommentar