jQuery를 사용하여 선택한 옵션 인덱스 가져오기
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()올바른 가치를 돌려주는 것이기 때문에 더욱 혼란스럽습니다.
첫 번째 방법은 테스트한 브라우저에서 작동하는 것처럼 보이지만 옵션 태그가 모든 브라우저의 실제 요소와 일치하지 않아 결과가 달라질 수 있습니다.
그냥.selectedIndexDOM 요소의 속성:
alert($("#dropDownMenuKategorie")[0].selectedIndex);
업데이트:
버전 1.6 jQuery 이후로.prop속성을 읽는 데 사용할 수 있는 메서드:
alert($("#dropDownMenuKategorie").prop('selectedIndex'));
Jquery 방식으로 해결할 수 있는 좋은 방법
$("#dropDownMenuKategorie option:selected").index()
함수를 사용하여 jQuery 개체의 첫 번째 요소에서 속성을 가져올 수 있습니다.
var savedIndex = $(selectElement).prop('selectedIndex');
이렇게 하면 코드가 jQuery 영역 내에 유지되고 선택기를 사용하여 선택한 옵션을 찾는 다른 옵션도 피할 수 있습니다.그런 다음 오버로드를 사용하여 복원할 수 있습니다.
$(selectElement).prop('selectedIndex', savedIndex);
user167517의 답변을 바탕으로 조금 다른 솔루션이 있습니다.내 기능에서 나는 내가 목표로 하는 선택 상자의 ID에 변수를 사용하고 있습니다.
var vOptionSelect = "#productcodeSelect1";
인덱스는 다음과 함께 반환됩니다.
$(vOptionSelect).find(":selected").index();
이거 먹어봐요.
alert(document.getElementById("dropDownMenuKategorie").selectedIndex);
엄선된인덱스는 JavaScript Select Property입니다.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());
});
});
JQuery의 .prop() 메서드를 사용하여 Select 박스의 인덱스를 얻을 수 있습니다.
확인 내용:
<!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>
사실은 조금 다르게 이미 언급된 내용을 반복하는 것 뿐입니다.
$("#dropDownMenuKategorie").change(function() {
var Selection = $("#dropDownMenuKategorie option:selected");
alert(Selection.index());
alert(Selection.val());
});
Jquery가 실려있다고 가정해봐요.
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>
JS:
$(document).ready(function(){
$("#dropDownMenuKategorie").change(function(){
var selIndex = $(this).prop('selectedIndex');
var selVal = $("#dropDownMenuKategorie option:selected").val();
var selText = $("#dropDownMenuKategorie option:selected").text();
console.log(selIndex + selVal + selText );
});
});
언급URL : https://stackoverflow.com/questions/13556941/get-index-of-selected-option-with-jquery
'programing' 카테고리의 다른 글
| .frm 파일에서 mysql 데이터베이스 복원 (0) | 2023.09.08 |
|---|---|
| 예외 처리에는 객체 지향 프로그래밍이 필요합니까? (0) | 2023.09.08 |
| 캐시 삭제 후 "네트워크 오류 0x2ef3" 오류와 함께 IE10/IE11 Ajax 게시 요청 중단 (0) | 2023.09.08 |
| 상대 레이아웃에서 버튼의 layout_align_parent_right 속성을 프로그래밍적으로 설정하는 방법은 무엇입니까? (0) | 2023.09.08 |
| 파이썬에서 메모리 뷰의 포인트는 정확히 무엇입니까? (0) | 2023.09.08 |