Javascript 使用 jquery 在 optgroup 中获取选择选项的索引
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2225901/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get index of select option in an optgroup with jquery
提问by Tauren
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 overallindex 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:
我需要找到所选选项的整体索引，但 optgroup 使这变得困难。换句话说，选定的应该返回 6，但它返回 2。我试过这个：
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.
但这会返回该 optgroup 中的索引，而不是整体索引。我无法更改选择选项的格式或值。
回答by bobince
Erm... whyever not good old DOM methods? For a single-select:
嗯...为什么不是好的旧 DOM 方法？对于单选：
var idx= document.getElementById('end').selectedIndex;
// or $('#end')[0].selectedIndex if you must
Or, which will also work on multi-selects, get the optionelement node you're interested in and fetch option.indexon it.
或者，这也适用于多选，获取option您感兴趣的元素节点并在其上获取option.index。
This is massively faster and simpler than getting jQuery to process complex selectors.
这比让 jQuery 处理复杂的选择器更快、更简单。
回答by cletus
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 :selectedpseudo-element. Note:indexes are 0-based.
使用该index()函数查找集合中的元素。使用 构建一组所有选项$("#end option")。使用:selected伪元素查找所选选项。注意：索引是从 0 开始的。
var options = $("#end option");
var idx = options.index(options.filter(":selected"));
回答by Harry
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.
这对我有用。该attr('selectedIndex')只带了选择列表中的不确定。
回答by Csaba
The same thing in jquery way is also short and simple:
jquery 中同样的事情也很简短：
var idx = $('#end').attr('selectedIndex');
回答by andrwsv
//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);
}
});
回答by Pointy
var index = -1;
$('#end option').each(function(i, option) {
if (option.selected) index = i;
});
A little ugly but I think that'd work.
有点丑，但我认为那行得通。
回答by Ram Lakhan Yadav
According to your problem returning all selected option's index value . you can try following code , may be help you.
根据您的问题，返回所有选定选项的索引值。您可以尝试以下代码，可能对您有所帮助。
code:
代码：
javascript code:
javascript代码：
<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:
HTML代码：
<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 <a style="cursor:pointer;" id="allcheck">All</a>
</strong>
