blocks|key|715355|text|您需要找到所选的选项：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|715356|$(this).find(':selected').data('id')|code-block|syntax|javascript|715357|或|715358|$(this).find(':selected').attr('data-id')|715359|虽然第一种方法是首选的。|715360|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>You need to find the selected option:</p>

<pre><code>$(this).find(':selected').data('id')
</code></pre>

<p>or</p>

<pre><code>$(this).find(':selected').attr('data-id')
</code></pre>

<p>although the first method is preferred.</p>


blocks|key|499878|text|尝试以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|499879|$('select').change(function(){
++alert($(this).children('option:selected').data('id'));
});|code-block|syntax|javascript|499880|change订阅服务器订阅select的更改事件，因此this参数是select元素。您需要找到要从中获取data-id的所选子对象。|offset|length|style|CODE|499881|entityMap^0|0|0|R|4|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Try the following:</p>

<pre><code>$('select').change(function(){
  alert($(this).children('option:selected').data('id'));
});
</code></pre>

<p>Your change subscriber subscribes to the change event of the select, so the <code>this</code> parameter is the select element. You need to find the selected child to get the data-id from.</p>


blocks|key|499919|text|document.querySelector('select').onchange+=+function(){+++
+++alert(this.selectedOptions[0].getAttribute('data-attr'));+
};|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|499920|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>document.querySelector('select').onchange = function(){   
   alert(this.selectedOptions[0].getAttribute('data-attr')); 
};
</code></pre>


blocks|key|715443|text|Vanilla+Javascript：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|715444|this.querySelector(':checked').getAttribute('data-id')|code-block|syntax|javascript|715445|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>Vanilla Javascript:</p>

<pre><code>this.querySelector(':checked').getAttribute('data-id')
</code></pre>


blocks|key|715549|text|您可以对this或$(this)使用context语法。这与find()的效果相同。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|715550|​|715551|$('select').change(function()+{
++++console.log('Clicked+option+value+=>+'+%2B+$(this).val());
++++
++++
++++console.log(':select+&+$(this)+=>++++'+%2B+$(':selected',+$(this)).data('id'));
++++console.log(':select+&+this+=>+++++++'+%2B+$(':selected',+this).data('id'));
++++console.log('option:select+&+this+=>+'+%2B+$('option:selected',+this).data('id'));
++++console.log('$(this)+&+find+=>+++++++'+%2B+$(this).find(':selected').data('id'));
});|code-block|syntax|javascript|715552|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
++++<option+data-id="1">one</option>
++++<option+data-id="2">two</option>
++++<option+data-id="3">three</option>
</select>|715553|715554|作为一个微优化问题，您可能会选择find()。如果你更喜欢编程高尔夫球，上下文语法会更简短。归根结底，它取决于编码风格。|715555|这是a+relevant+performance+comparison。|715556|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/18222210/2943403^0|4|4|9|7|I|7|U|6|0|0|0|0|0|G|6|0|2|X|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]|$9|14|A|15|B|C]|$9|16|A|17|B|C]|$9|18|A|19|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1A|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1B|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|1C|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|1D|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|1E|8|@$9|1F|A|1G|B|C]]|D|@]|E|$]]|$1|R|3|S|5|6|7|1H|8|@]|D|@$9|1I|A|1J|1|1K]]|E|$]]|$1|T|3|-4|5|6|7|1L|8|@]|D|@]|E|$]]]|U|$V|$5|W|X|Y|E|$Z|10]]]]

<p>You can use <code>context</code> syntax with <code>this</code> or <code>$(this)</code>.  This is the same effect as <code>find()</code>.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('select').change(function() {
    console.log('Clicked option value =&gt; ' + $(this).val());
    &lt;!-- undefined console.log('$(this) without explicit :select =&gt; ' + $(this).data('id')); --&gt;
    &lt;!-- error console.log('this without explicit :select =&gt; ' + this.data('id')); --&gt;
    console.log(':select &amp; $(this) =&gt;    ' + $(':selected', $(this)).data('id'));
    console.log(':select &amp; this =&gt;       ' + $(':selected', this).data('id'));
    console.log('option:select &amp; this =&gt; ' + $('option:selected', this).data('id'));
    console.log('$(this) &amp; find =&gt;       ' + $(this).find(':selected').data('id'));
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;select&gt;
    &lt;option data-id="1"&gt;one&lt;/option&gt;
    &lt;option data-id="2"&gt;two&lt;/option&gt;
    &lt;option data-id="3"&gt;three&lt;/option&gt;
&lt;/select&gt;</code></pre>
</div>
</div>
</p>

<p>As a matter of microoptimization, you might opt for <code>find()</code>.  If you are more of a code golfer, the context syntax is more brief.  It comes down to coding style basically.</p>

<p>Here is <a href="https://stackoverflow.com/a/18222210/2943403">a relevant performance comparison</a>.</p>


blocks|key|499955|text|$('#foo+option:selected').data('id');|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|499956|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>$('#foo option:selected').data('id');
</code></pre>


blocks|key|500151|text|也许是一种更优雅的方式|type|unstyled|depth|inlineStyleRanges|entityRanges|data|500152|$('option:selected',+this).data('id')|code-block|syntax|javascript|500153|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>Maybe a more elegant way</p>
<pre><code>$('option:selected', this).data('id')
</code></pre>


blocks|key|499939|text|这对我很管用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|499940|<select+class="form-control"+id="foo">
++++<option+value="first"+data-id="1">first</option>
++++<option+value="second"+data-id="2">second</option>
</select>|code-block|syntax|javascript|499941|和脚本|499942|$('#foo').on("change",function(){
++++var+dataid+=+$("#foo+option:selected").attr('data-id');
++++alert(dataid)
});|499943|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>this works for me</p>

<pre><code>&lt;select class="form-control" id="foo"&gt;
    &lt;option value="first" data-id="1"&gt;first&lt;/option&gt;
    &lt;option value="second" data-id="2"&gt;second&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>and the script</p>

<pre><code>$('#foo').on("change",function(){
    var dataid = $("#foo option:selected").attr('data-id');
    alert(dataid)
});
</code></pre>


blocks|key|500105|text|通过使用它，您可以获得文本、值和数据属性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|500106|<select+name="your_name"+id="your_id"+onchange="getSelectedDataAttribute(this)">
++++<option+value="1"+data-id="123">One</option>
++++<option+value="2"+data-id="234">Two</option>
</select>

function+getSelectedDataAttribute(event)+{
++++var+selected_text+=+event.options[event.selectedIndex].innerHTML;
++++var+selected_value+=+event.value;
++++var+data-id+=+event.options[event.selectedIndex].dataset.id);++++
}|code-block|syntax|javascript|500107|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>By using this you can get the text, value and data attribute.</p>
<pre><code>&lt;select name=&quot;your_name&quot; id=&quot;your_id&quot; onchange=&quot;getSelectedDataAttribute(this)&quot;&gt;
    &lt;option value=&quot;1&quot; data-id=&quot;123&quot;&gt;One&lt;/option&gt;
    &lt;option value=&quot;2&quot; data-id=&quot;234&quot;&gt;Two&lt;/option&gt;
&lt;/select&gt;

function getSelectedDataAttribute(event) {
    var selected_text = event.options[event.selectedIndex].innerHTML;
    var selected_value = event.value;
    var data-id = event.options[event.selectedIndex].dataset.id);    
}
</code></pre>


<p>The following code returns 'undefined'...</p>

<pre><code>$('select').change(function(){
    alert($(this).data('id'));
});

&lt;select&gt;
    &lt;option data-id="1"&gt;one&lt;/option&gt;
    &lt;option data-id="2"&gt;two&lt;/option&gt;
    &lt;option data-id="3"&gt;three&lt;/option&gt;
&lt;/select&gt;
</code></pre>


On select change, get data attribute value

服务器

下面的代码返回'undefined'...$('select').change(function(){    alert($(this).data('id'));});<select>    <option data-id="1">one</option>    <option data-id="2">two</option>    <option data-id="3">three</optio

问在选择更改时，获取数据属性值
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在选择更改时，获取数据属性值EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在选择更改时，获取数据属性值
EN