11

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.

7 Answers 7

19

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.

5
  • Heh, exactly. Cripes, I'm just gonna go ahead and remove the "javascript" tag from this show of DOM ignorance. Feb 9, 2010 at 4:29
  • But will this work with the optgroup? I should test it I suppose.
    – Tauren
    Feb 9, 2010 at 20:43
  • 1
    Yes, selectedIndex will be 6, as stated in the question.
    – bobince
    Feb 9, 2010 at 21:18
  • Yes indeed it does work. Much more efficient than the jquery way! I'm switching the answer to this solution. Thanks!
    – Tauren
    Feb 10, 2010 at 10:06
  • @Cresent - I just added back the javascript tag. Since I've now chosen a javascript answer, it seemed appropriate to do.
    – Tauren
    Feb 10, 2010 at 10:09
9

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"));
5
  • oh that's good to know. (oo that's a new 1.4 thing; I can't wait to upgrade.)
    – Pointy
    Feb 9, 2010 at 0:27
  • @Pointy: nothing there requires jQuery 1.4. I've linked to those docs but as far as I can tell, this will work in any version.
    – cletus
    Feb 9, 2010 at 0:30
  • @cletuus Oh OK then; I was going by what it says in the jQuery API docs for "index(selector)" - "version added: 1.4"
    – Pointy
    Feb 9, 2010 at 1:30
  • @Pointy: yes thats new but I'm using index(element) which is "since 1.0".
    – cletus
    Feb 9, 2010 at 1:49
  • @cletus, thanks again for your solution, it is certainly a great jquery-only way to do this. But I'm switching my choice to the answer given by @bobince as it is far more efficient.
    – Tauren
    Feb 10, 2010 at 10:08
3

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.

2

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

var idx = $('#end').attr('selectedIndex');
0
1
//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);
        }
    });
0
var index = -1;
$('#end option').each(function(i, option) {
  if (option.selected) index = i;
});

A little ugly but I think that'd work.

0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.