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=]उपयोग तब किया जाता है जब चयन उस idपर होता है। [0].selectedIndexऔर option:selected-answers नीचे दोनों ठीक हैं।
डायनेवाला

जवाबों:


338

पहले तरीके उन ब्राउज़रों में काम करते हैं जिन्हें मैंने परीक्षण किया था, लेकिन विकल्प टैग वास्तव में सभी ब्राउज़रों में वास्तविक तत्वों के अनुरूप नहीं हैं, इसलिए परिणाम भिन्न हो सकते हैं।

selectedIndexडोम तत्व की संपत्ति का उपयोग करें :

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

अपडेट करें:

चूंकि संस्करण 1.6 jQuery में वह propविधि है जिसका उपयोग गुणों को पढ़ने के लिए किया जा सकता है:

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

7
क्यों [0]?
Joan.bdm

33
@ Joan.bdm jquery के पास selectedIndexसंपत्ति नहीं है । जोड़ना [0]javascript ऑब्जेक्ट के लिए jquery ऑब्जेक्ट को कनवर्ट करता है जिसके पास selectedIndexगुण है। यह उदाहरण बिना काम नहीं करेगा[0]
अराम

@ जैसन एल .: selectedIndexएक संपत्ति है, और इसके अनुरूप कोई गुण नहीं है। attrविधि 1.6 की तुलना में पिछले संस्करणों में संपत्ति को पढ़ने के लिए काम कर सकते हैं, लेकिन उस संस्करण से नहीं।
गुफ्फा

@Guffa selectedIndex0 विकल्प के साथ पहले विकल्प के साथ शुरू क्यों नहीं होता है?
adamj

1
@ आदमज: फिर आप कुछ गलत कर रहे हैं। selectedIndexसंपत्ति शून्य आधारित है। मैंने दस्तावेज़ीकरण की जाँच की और यहां तक ​​कि इसे स्वयं करने की कोशिश की कि वास्तव में इस बारे में 100% निश्चित है।
गुफ़ा

95

इसे Jquery तरीके से हल करने का अच्छा तरीका है

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

2
मुझे यह पसंद है कि इस उत्तर [0]को ओपी के पसंदीदा उत्तर की आवश्यकता नहीं है और एक अजगर देव के रूप में, मैं वास्तव में इस उत्तर की पठनीयता की सराहना कर सकता हूं।
NuclearPeon

4
ओपी ने पहले ही कोशिश की। कोड प्रश्न में पहली विधि के समान है।
गुफा

18

मेरे पास उपयोगकर्ता167517 के उत्तर के आधार पर थोड़ा अलग समाधान है। अपने फ़ंक्शन में, मैं जिस लक्ष्य बॉक्स को चुन रहा हूं, उसकी आईडी के लिए एक चर का उपयोग कर रहा हूं।

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
सभी अलर्ट के साथ क्या है?
बीनवाह

3
@ बीनवाह - यह किसी भी चीज को परखने का सबसे अच्छा तरीका है! ;)
जोपीसी

@JoePC नहीं इसकी नहीं।

@ reiner.luke -;) = facetiousness
जोपीसी

6

selectIndex एक जावास्क्रिप्ट सेलेक्ट प्रॉपर्टी है। 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>
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.