blocks|key|211620|text|第一种方法似乎在我测试的浏览器中有效，但选项标记并不是真正对应于所有浏览器中的实际元素，因此结果可能会有所不同。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|211621|只需使用DOM元素的selectedIndex属性：|offset|length|style|CODE|211622|alert($("#dropDownMenuKategorie")[0].selectedIndex);|code-block|syntax|javascript|211623|更新：|211624|自1.6版以来，jQuery具有可用于读取属性的prop方法：|211625|alert($("#dropDownMenuKategorie").prop('selectedIndex'));|211626|entityMap^0|0|A|D|0|0|0|O|4|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@$D|W|E|X|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|Y|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|Z|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|10|8|@$D|11|E|12|F|G]]|9|@]|A|$]]|$1|Q|3|R|5|J|7|13|8|@]|9|@]|A|$K|L]]|$1|S|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|T|$]]

<p>The first methods seem to work in the browsers that I tested, but the option tags doesn't really correspond to actual elements in all browsers, so the result may vary.</p>

<p>Just use the <code>selectedIndex</code> property of the DOM element:</p>

<pre><code>alert($("#dropDownMenuKategorie")[0].selectedIndex);
</code></pre>

<h3>Update:</h3>

<p>Since version 1.6 jQuery has the <code>prop</code> method that can be used to read properties:</p>

<pre><code>alert($("#dropDownMenuKategorie").prop('selectedIndex'));
</code></pre>


blocks|key|430124|text|尝尝这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|430125|+alert(document.getElementById("dropDownMenuKategorie").selectedIndex);|code-block|syntax|javascript|430126|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>try this</p>

<pre><code> alert(document.getElementById("dropDownMenuKategorie").selectedIndex);
</code></pre>


blocks|key|430161|text|以Jquery方式解决此问题的好方法|type|unstyled|depth|inlineStyleRanges|entityRanges|data|430162|$("#dropDownMenuKategorie+option:selected").index()|code-block|syntax|javascript|430163|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Good way to solve this in Jquery manner</p>

<pre><code>$("#dropDownMenuKategorie option:selected").index()
</code></pre>


blocks|key|211688|text|根据user167517的回答，我有一个略有不同的解决方案。在我的函数中，我使用了一个变量来表示我的目标选择框的id。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|211689|var+vOptionSelect+=+"#productcodeSelect1";|code-block|syntax|javascript|211690|索引的返回值为：|211691|$(vOptionSelect).find(":selected").index();|211692|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I have a slightly different solution based on the answer by user167517. In my function I'm using a variable for the id of the select box I'm targeting.</p>

<pre><code>var vOptionSelect = "#productcodeSelect1";
</code></pre>

<p>The index is returned with:</p>

<pre><code>$(vOptionSelect).find(":selected").index();
</code></pre>


blocks|key|430205|text|selectedIndex是JavaScript选择属性。对于jQuery，您可以使用以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|430206|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());
++});
});|code-block|syntax|javascript|430207|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/jsref/prop_select_selectedindex.asp^0|0|D|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p><a href="http://www.w3schools.com/jsref/prop_select_selectedindex.asp" rel="noreferrer">selectedIndex</a> is a JavaScript Select Property. For jQuery you can use this code:</p>

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


blocks|key|430236|text|您可以使用.prop(propertyName)函数从jQuery对象中的第一个元素获取属性。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|430237|var+savedIndex+=+$(selectElement).prop('selectedIndex');|code-block|syntax|javascript|430238|这使您的代码保持在jQuery领域内，并且还避免了使用选择器来查找所选选项的其他选择。然后，您可以使用重载来恢复它：|430239|$(selectElement).prop('selectedIndex',+savedIndex);|430240|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/prop/^0|5|J|5|J|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|F|3|G|5|H|7|12|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|13|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|14|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

<p>You can use the <a href="http://api.jquery.com/prop/" rel="noreferrer"><code>.prop(propertyName)</code></a> function to get a property from the first element in the jQuery object.</p>

<pre><code>var savedIndex = $(selectElement).prop('selectedIndex');
</code></pre>

<p>This keeps your code within the jQuery realm and also avoids the other option of using a selector to find the selected option. You can then restore it using the overload:</p>

<pre><code>$(selectElement).prop('selectedIndex', savedIndex);
</code></pre>


blocks|key|211856|text|可以使用JQuery的：.prop()方法获取选择框的索引|type|unstyled|depth|inlineStyleRanges|entityRanges|data|211857|请检查以下内容：|211858|<!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>|code-block|syntax|javascript|211859|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>You can get the index of the select box by using : .prop() method of JQuery </p>

<p>Check This :</p>

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

});

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

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


blocks|key|211863|text|<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>

$(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+%2B+selVal+%2B+selText+);
++++});
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|211864|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;select id=&quot;dropDownMenuKategorie&quot;&gt;
    &lt;option value=&quot;gastronomie&quot;&gt;Gastronomie&lt;/option&gt;
    &lt;option value=&quot;finanzen&quot;&gt;Finanzen&lt;/option&gt;
    &lt;option value=&quot;lebensmittel&quot;&gt;Lebensmittel&lt;/option&gt;
    &lt;option value=&quot;gewerbe&quot;&gt;Gewerbe&lt;/option&gt;
   &lt;option value=&quot;shopping&quot;&gt;Shopping&lt;/option&gt;
   &lt;option value=&quot;bildung&quot;&gt;Bildung&lt;/option&gt;
&lt;/select&gt;

$(document).ready(function(){
    $(&quot;#dropDownMenuKategorie&quot;).change(function(){
       var selIndex = $(this).prop('selectedIndex');
       var selVal = $(&quot;#dropDownMenuKategorie option:selected&quot;).val();
       var selText = $(&quot;#dropDownMenuKategorie option:selected&quot;).text();
       console.log(selIndex + selVal + selText );
    });
});
</code></pre>


<p>I'm a little bit confused about how to get an index of a selected option from a HTML <code>&lt;select&gt;</code> item.</p>

<p>On <a href="http://www.theextremewebdesigns.com/blog/jquery-get-selected-index-jquery-get-selected-option-index-2-ways/" rel="noreferrer">this</a> page there are two methods described. However, both are always returning <code>-1</code>. Here is my jQuery code:</p>

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

<p>and in html</p>

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

<p>Why this behavior?  Is there any chance that the <code>select</code> is not "ready" at the moment of assigning its <code>change()</code> method? Additionally, changing <code>.index()</code> to <code>.val()</code> is returning the right value, so that's what confuses me even more.</p>


Get index of selected option with jQuery

jQuery

我对如何从超文本标记语言<select>项中获取所选选项的索引感到有点困惑。在页面上，描述了两种方法。但是，这两个函数总是返回-1。下面是我的jQuery代码：$(document).ready(function(){    $("#dropDownMenuKategorie").change(function(){ ...

问使用jQuery获取所选选项的索引
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery获取所选选项的索引EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery获取所选选项的索引
EN