CODEWITHSUNDEEP
javascriptjquery
Tauren
Tauren

Reputation: 27235

Get index of select option in an optgroup with jquery

I have the following select:

<select name="end" id="end"> 
    <optgroup label="Morning"> 
        <option value="12:00a">12:00 am</option> 
        <option value="12:30a">12:30 am</option> 
        <option value="1:00a">1:00 am</option> 
        <option value="1:30a">1:30 am</option> 
    </optgroup> 
    <optgroup label="Evening"> 
        <option value="12:00p">12:00 pm</option> 
        <option value="12:30p">12:30 pm</option> 
        <option value="1:00p" selected="selected">1:00 pm</option> 
        <option value="1:30p">1:30 pm</option> 
    </optgroup> 
</select>

I need to find the overall index of the selected option, but the optgroup is making that difficult. In other words, the selected one should return 6, but it is returning 2. I tried this:

var idx = $('#end :selected').prevAll().size();

But that returns the index within that optgroup, not the overall index. I can't change the format or values of the select options.

Upvotes: 11

Views: 23970

Answers (7)

Ram Lakhan Yadav
Ram Lakhan Yadav

Reputation: 31

According to your problem returning all selected option's index value . you can try following code , may be help you.

code:

javascript code:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">


       $(function(){

                $('#allcheck').click(function(){
                var chk=$('#select_option >optgroup > option:selected');
                   chk.each(function(){
                       alert('Index: ' + $('option').index(this));
                });
            });
   });});

HtML CODE:

       <select multiple="multiple" size="10" id="select_option" name="option_value[]">
         <optgroup label="Morning"> 
            <option value="12:00a">12:00 am</option> 
            <option value="12:30a">12:30 am</option> 
            <option value="1:00a">1:00 am</option> 
            <option value="1:30a">1:30 am</option> 
        </optgroup> 
        <optgroup label="Evening"> 
           <option value="12:00p">12:00 pm</option> 
           <option value="12:30p">12:30 pm</option> 
           <option value="1:00p" selected="selected">1:00 pm</option> 
           <option value="1:30p">1:30 pm</option> 
    </optgroup>  



     <strong>Select&nbsp;&nbsp;<a style="cursor:pointer;" id="allcheck">All</a>
 </strong>

Upvotes: 0

Harry
Harry

Reputation: 31

You can also try this:

$('#end option:selected').prop('index')

This worked for me. The attr('selectedIndex') only brought up undefined with the select list.

Upvotes: 3

Csaba
Csaba

Reputation: 21

The same thing in jquery way is also short and simple:

var idx = $('#end').attr('selectedIndex');

Upvotes: 2

andrwsv
andrwsv

Reputation: 31

//funcion para seleccionar con jquery por el index del select 
var text = '';
var canal = ($("#name_canal").val()).split(' ');
$('#id_empresa option').each(function(i, option) {
        text = $('#id_empresa option:eq('+i+')').text();
        if(text.toLowerCase() == canal[0].toLowerCase()){
            $('#id_empresa option:eq('+i+')').attr('selected', true);
        }
    });

Upvotes: 1

bobince
bobince

Reputation: 536339

Erm... whyever not good old DOM methods? For a single-select:

var idx= document.getElementById('end').selectedIndex;

// or $('#end')[0].selectedIndex if you must

Or, which will also work on multi-selects, get the option element node you're interested in and fetch option.index on it.

This is massively faster and simpler than getting jQuery to process complex selectors.

Upvotes: 19

cletus
cletus

Reputation: 625007

Use the index() function to find an element within a set. Construct a set of all the options using $("#end option"). Find the selected option using the :selected pseudo-element. Note: indexes are 0-based.

var options = $("#end option");
var idx = options.index(options.filter(":selected"));

Upvotes: 9

Pointy
Pointy

Reputation: 413682

var index = -1;
$('#end option').each(function(i, option) {
  if (option.selected) index = i;
});

A little ugly but I think that'd work.

Upvotes: 0

Related Questions