Jquery - выберите optgroup в выберите - PullRequest
Новая
       36

Jquery - выберите optgroup в выберите

9 голосов
/ 29 марта 2011

У меня есть выбор с 2 optgroups.Есть ли способ вызвать функцию, только если выбрана опция из первой optgroup, и вызвать другую функцию, если выбрана опция из второй optgroup?

Ответы [ 3 ]

28 голосов
/ 29 марта 2011

Конечно.

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

Пример здесь: http://jsfiddle.net/pyG2v/

1 голос
/ 29 марта 2011 
$('#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
  }
});
0 голосов
/ 14 августа 2015

Когда вы нажимаете на опцию, вы получаете Id имя группы опций. 

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