jQuery로 선택한 옵션의 인덱스 가져 오기

171

HTML에서 선택한 옵션의 색인을 얻는 방법에 대해 약간 혼란 스럽습니다. <select> 항목 .

에 이 페이지에서 설명하는 두 가지 방법이있다. 그러나 둘 다 항상을 반환 -1합니다. 내 jQuery 코드는 다음과 같습니다.

$(document).ready(function(){
    $("#dropDownMenuKategorie").change(function(){
        alert($("#dropDownMenuKategorie option:selected").index());
        alert($("select[name='dropDownMenuKategorie'] option:selected").index());
    });
});

그리고 html로

(...)
<select id="dropDownMenuKategorie">
    <option value="gastronomie">Gastronomie</option>
    <option value="finanzen">Finanzen</option>
    <option value="lebensmittel">Lebensmittel</option>
    <option value="gewerbe">Gewerbe</option>
    <option value="shopping">Shopping</option>
    <option value="bildung">Bildung</option>
</select>
(...)

왜 이런 행동? 방법 select을 할당 할 때 "준비되지 않은" 가능성이 change()있습니까? 또한 변화 .index()하는 .val()날 더 혼란 무엇 때문에 그의 오른쪽 값을 반환한다.

— 발렌티노 루
소스

1

그런 오래된 질문이지만 실제 문제는 [name=]select가 id그것에 있을 때 사용됩니다 . 아래 의- [0].selectedIndex및 option:selected답변은 모두 괜찮습니다.

— diynevala

338

첫 번째 방법은 테스트 한 브라우저에서 작동하는 것처럼 보이지만 옵션 태그가 실제로 모든 브라우저의 실제 요소와 일치하지 않으므로 결과가 다를 수 있습니다.

selectedIndexDOM 요소 의 속성을 사용하십시오 .

alert($("#dropDownMenuKategorie")[0].selectedIndex);

최신 정보:

버전 1.6부터 jQuery에는 prop속성을 읽는 데 사용할 수있는 방법이 있습니다.

alert($("#dropDownMenuKategorie").prop('selectedIndex'));

— 구파
소스

7

왜 [0]?

— Joan.bdm 2014 년

33

@ Joan.bdm jquery에는 selectedIndex속성 이 없습니다 . 추가 [0]하면 jquery 객체가 selectedIndex속성 이있는 자바 스크립트 객체로 변환 됩니다. 이 예가 없으면 작동하지 않습니다[0]

— Aram

@JasonL .: selectedIndex은 속성이며 해당하는 속성이 없습니다. 이 attr방법은 1.6 이전의 버전에서는 속성을 읽지 만 해당 버전에서는 읽지 못할 수 있습니다.

— Guffa

@ 구파 왜 selectedIndex첫 번째 옵션으로 0부터 시작하지 않는지에 대한 아이디어 가 있습니까?

— adamj

1

@adamj : 그럼 당신은 뭔가 잘못하고 있습니다. 이 selectedIndex속성은 0부터 시작합니다. 나는 문서를 점검하고 심지어 이것에 대해 정말로 100 % 확신하기 위해 직접 시도했다.

— Guffa

95

Jquery 방식으로 이것을 해결하는 좋은 방법

$("#dropDownMenuKategorie option:selected").index()

— 사용자 167517
소스

2

나는이 답변이 [0]OP의 선호 답변을 필요로하지 않으며 파이썬 개발자 로서이 답변의 가독성을 정말로 고맙게 생각합니다.

— NuclearPeon

4

OP는 이미 시도했습니다. 코드는 문제의 첫 번째 방법과 동일합니다.

— Guffa

18

user167517의 답변에 따라 약간 다른 솔루션이 있습니다. 내 기능에서 타겟팅하려는 선택 상자의 ID에 변수를 사용하고 있습니다.

var vOptionSelect = "#productcodeSelect1";

색인은 다음과 함께 리턴됩니다.

$(vOptionSelect).find(":selected").index();

— 럭키 치이
소스

17

이 .prop(propertyName)함수를 사용 하여 jQuery 객체의 첫 번째 요소에서 속성을 가져올 수 있습니다 .

var savedIndex = $(selectElement).prop('selectedIndex');

이렇게하면 코드가 jQuery 영역 내에 유지되고 선택기를 사용하여 선택한 옵션을 찾는 다른 옵션도 피할 수 있습니다. 그런 다음 과부하를 사용하여 복원 할 수 있습니다.

$(selectElement).prop('selectedIndex', savedIndex);

— 닉 베드포드
소스

6

이 시도

 alert(document.getElementById("dropDownMenuKategorie").selectedIndex);

— 라 제시 카카와
소스

7

충분하지 않은 jQuery

— sohaiby

1

모든 경고와 함께 무엇입니까?

— Beanwah

3

@Beanwah-무엇이든 테스트하는 가장 좋은 방법입니다! ;)

— JoePC

@JoePC는 아닙니다. console.log ()는 더 잘할 것입니다

@ reiner.luke-;) =

— 대면 심

6

selectedIndex 는 JavaScript Select 속성입니다. jQuery의 경우 다음 코드를 사용할 수 있습니다.

jQuery(document).ready(function($) {
  $("#dropDownMenuKategorie").change(function() {
    // I personally prefer using console.log(), but if you want you can still go with the alert().
    console.log($(this).children('option:selected').index());
  });
});

— 리시 쿨 쉬레 슈타
소스

3

JQuery의 .prop () 메소드를 사용하여 선택 상자의 색인을 얻을 수 있습니다.

이것을 확인하십시오 :

<!doctype html>
<html>
<head>
<script type="text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

});

function check(){
    alert($("#NumberSelector").prop('selectedIndex'));
    alert(document.getElementById("NumberSelector").value);
}
</script>
</head>

<body bgcolor="yellow">
<div>
<select id="NumberSelector" onchange="check()">
    <option value="Its Zero">Zero</option>
    <option value="Its One">One</option>
    <option value="Its Two">Two</option>
    <option value="Its Three">Three</option>
    <option value="Its Four">Four</option>
    <option value="Its Five">Five</option>
    <option value="Its Six">Six</option>
    <option value="Its Seven">Seven</option>
</select>
</div>
</body>
</html>

— 니 하리 카 비라리
소스