Nhận chỉ mục của tùy chọn đã chọn với jQuery

171

Tôi hơi bối rối về cách lấy chỉ mục của tùy chọn đã chọn từ một <select>mục HTML .

Trên này trang có hai phương pháp mô tả. Tuy nhiên, cả hai luôn trở về -1. Đây là mã jQuery của tôi:

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

và trong 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>
(...)

Tại sao lại có hành vi này? Có bất kỳ cơ hội nào mà selectchưa "sẵn sàng" tại thời điểm gán change()phương thức của nó không? Ngoài ra, thay đổi .index()thành .val()trả về đúng giá trị, vì vậy đó là điều khiến tôi bối rối hơn nữa.

— Valentino Ru
nguồn

1

Một câu hỏi cũ như vậy nhưng vấn đề thực sự là vấn đề được [name=]sử dụng khi có lựa chọn id. Các [0].selectedIndexvà option:selected-answers bên dưới đều ok.

— diynevala

338

Các phương thức đầu tiên dường như hoạt động trong các trình duyệt mà tôi đã thử nghiệm, nhưng các thẻ tùy chọn không thực sự tương ứng với các yếu tố thực tế trong tất cả các trình duyệt, do đó kết quả có thể khác nhau.

Chỉ cần sử dụng thuộc selectedIndextính của phần tử DOM:

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

Cập nhật:

Do phiên bản 1.6 jQuery có propphương thức có thể được sử dụng để đọc các thuộc tính:

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

— Guffa
nguồn

7

Tại sao [0]?

— Joan.bdm

33

@ Joan.bdm jquery không có selectedIndextài sản. Thêm [0]chuyển đổi đối tượng jquery thành đối tượng javascript có thuộc selectedIndextính. Ví dụ này sẽ không hoạt động mà không có[0]

— Aram

@JasonL.: selectedIndexLà một tài sản, và không có thuộc tính tương ứng. Các attrphương pháp có thể làm việc để đọc tài sản trong các phiên bản sớm hơn 1.6, nhưng không phải từ phiên bản đó.

— Guffa

@Guffa Bạn có ý tưởng nào về việc tại sao selectedIndexkhông bắt đầu từ 0 với tùy chọn đầu tiên không?

— adamj

1

@adamj: Vậy thì bạn đang làm gì đó sai. Các selectedIndextài sản là không dựa trên. Tôi đã kiểm tra tài liệu và thậm chí đã tự mình thử nó để thực sự chắc chắn 100% về điều này.

— Guffa

95

Cách tốt để giải quyết điều này theo cách của Jquery

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

— người dùng167517
nguồn

2

Tôi thích rằng câu trả lời này không yêu cầu [0]câu trả lời ưa thích của OP và là một nhà phát triển trăn, tôi thực sự có thể đánh giá cao khả năng đọc của câu trả lời này.

— NuclePeon

4

OP đã thử điều đó. Mã này giống hệt với phương thức đầu tiên trong câu hỏi.

— Guffa

18

Tôi có một giải pháp hơi khác dựa trên câu trả lời của user167517. Trong chức năng của tôi, tôi đang sử dụng một biến cho id của hộp chọn tôi đang nhắm mục tiêu.

var vOptionSelect = "#productcodeSelect1";

Chỉ mục được trả về với:

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

— may mắn
nguồn

17

Bạn có thể sử dụng .prop(propertyName)hàm để lấy một thuộc tính từ phần tử đầu tiên trong đối tượng jQuery.

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

Điều này giữ mã của bạn trong vương quốc jQuery và cũng tránh các tùy chọn khác là sử dụng bộ chọn để tìm tùy chọn đã chọn. Sau đó, bạn có thể khôi phục nó bằng cách sử dụng quá tải:

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

— Nick Bedford
nguồn

6

thử cái này

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

— rajesh kakaw
nguồn

7

Không đủ jQuery

— sohaiby

1

Những gì với tất cả các cảnh báo?

— Beanwah

3

@Beanwah - Đó là cách tốt nhất để kiểm tra mọi thứ! ;)

— JoePC

@JoePC không có. console.log () sẽ làm tốt hơn

@ reiner.luke -;) = sự

— hiếu chiến

6

chọn Index là một thuộc tính chọn JavaScript. Đối với jQuery, bạn có thể sử dụng mã này:

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());
  });
});

— Rishi Kulshreshtha
nguồn

3

Bạn có thể lấy chỉ mục của hộp chọn bằng cách sử dụng phương thức: .prop () của JQuery

Kiểm tra điều này :

<!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>

— Niharika Birari
nguồn