獲取選擇選項的指數OPTGROUP

如果我有一個選項列表，如下面：獲取選擇選項的指數OPTGROUP

<select name="optionList" id="optionList"> 
    <optgroup label="optgroup1"> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
     <option value="4">4</option> 
    </optgroup> 
    <optgroup label="optgroup2"> 
     <option value="5">5</option> 
     <option value="6">6</option> 
     <option value="7">7</option> 
     <option value="8">8</option> 
    </optgroup> 
</select>

我知道我可以使用訪問的selectedIndex：

document.getElementById('optionList').selectedIndex;

如果我使用上述儘管5的選定索引將是4，6將是5,7將是6等。

如何判斷optgroup中的選定項目在哪裏？

總之我希望能夠查詢的東西，回到它的位置在OPTGROUP使5將返回0，6將返回1等等

來源

2013-11-14 user2985511

這是一個稍微複雜的任務，因爲沒有原生的方式來完成它。我將根據當前的瀏覽器標準來回答：可以在較舊的瀏覽器中執行此操作，但這是更多的工作。

var select = document.getElementById('optionList'), // the <select> element 
    selectedIndex = select.selectedIndex, // 0-based index of which element in the <select> is selected 
    selectedElement = select.options[selectedIndex], // DOM element selected 
    optGroup = selectedElement.parentNode, // <optgroup> element 
    optGroupOptions = optGroup.children, // <option> elements in the <optgroup> 
    positionInOptGroup = Array.prototype.indexOf.call(optGroupOptions, selectedElement); // the selected <option>'s position in the <optgroup>

(jsFiddle)

注意的是，如果瀏覽器不支持Element#children這是不行的（即IE < 9）。您將不得不將childNodes集合過濾到數組中。同樣的，它需要Array#indexOf，也沒有在IE <存在9.

來源

2013-11-14 14:00:44 lonesomeday

與純JavaScript

var element = document.getElementById('optionList'); 
console.log(element.options[element.selectedIndex].parentNode.label);

來源

2013-11-14 13:49:41 rray

jQuery的跨瀏覽溶液：

$('#optionList option:selected').index();

preview

來源

2013-11-14 13:59:32

試試這個：

function indexOf(select) { 
    var options = select.options; 
    var selectedOption = options.item(select.selectedIndex); 
    var nodes = selectedOption.parentNode.children; 

    for (var i = 0; i < nodes.length; ++i) { 
     if (nodes[i] === selectedOption) { 
      return i; 
     } 
    } 

    return -1; 
} 

indexOf(document.getElementById('optionList'));

工作樣本：http://jsfiddle.net/49R7k/1/

來源

2013-11-14 14:00:48 Krzysztof

獲取選擇選項的指數OPTGROUP

回答

相關問題