blocks|key|1611982|text|options属性包含所有的<options>+-从那里您可以查看.text|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1611983|document.getElementById('test').options[0].text+==+'Text+One'|code-block|syntax|javascript|1611984|entityMap^0|0|7|E|9|X|5|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|U|8|@]|D|@]|E|$]]]|L|$]]

<p>The <code>options</code> property contains all the <code>&lt;options&gt;</code> - from there you can look at <code>.text</code></p>

<pre><code>document.getElementById('test').options[0].text == 'Text One'
</code></pre>


blocks|key|1611995|text|function+getSelectedText(elementId)+{
++++var+elt+=+document.getElementById(elementId);

++++if+(elt.selectedIndex+==+-1)
++++++++return+null;

++++return+elt.options[elt.selectedIndex].text;
}

var+text+=+getSelectedText('test');|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1611996|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>function getSelectedText(elementId) {
    var elt = document.getElementById(elementId);

    if (elt.selectedIndex == -1)
        return null;

    return elt.options[elt.selectedIndex].text;
}

var text = getSelectedText('test');
</code></pre>


blocks|key|1397309|text|如果使用jQuery，则可以编写以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1397310|$("#selectId+option:selected").html();|code-block|syntax|javascript|1397311|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>If you use jQuery then you can write the following code:</p>

<pre><code>$("#selectId option:selected").html();
</code></pre>


blocks|key|1612049|text|document.getElementById('test').options[document.getElementById('test').selectedIndex].text;|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1612050|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.getElementById('test').options[document.getElementById('test').selectedIndex].text;
</code></pre>


blocks|key|1612091|text|类似于@artur，只是没有jQuery，只有普通的javascript：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1612092|//使用@Sean-bright的"elt“变量|1612093|var+selection=elt.options[elt.selectedIndex].innerHTML;|code-block|syntax|javascript|1612094|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>Similar to @artur just without jQuery, with plain javascript:</p>

<p>// Using @Sean-bright's "elt" variable</p>

<pre><code>var selection=elt.options[elt.selectedIndex].innerHTML;
</code></pre>


blocks|key|1612157|text|在HTML5下，您可以执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1612158|document.getElementById('test').selectedOptions[0].text|code-block|syntax|javascript|1612159|MDN在https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions上的文档显示完全支持跨浏览器(至少在2017年12月)，包括Chrome、Firefox、Edge和移动浏览器，但不包括‘s。|offset|length|1612160|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions^0|0|0|4|2A|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Under HTML5 you are be able to do this:</p>

<pre><code>document.getElementById('test').selectedOptions[0].text
</code></pre>

<p>MDN's documentation at <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions</a> indicates full cross-browser support (as of at least December 2017), including Chrome, Firefox, Edge and mobile browsers, but excluding Internet Explorer.</p>


blocks|key|1397465|text|如果你找到了这个线程，并想知道如何通过事件获取所选的选项文本，下面是示例代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1397466|alert(event.target.options[event.target.selectedIndex].text);|code-block|syntax|javascript|1397467|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>If you found this thread and wanted to know how to get the selected option text via event here is sample code:</p>

<pre><code>alert(event.target.options[event.target.selectedIndex].text);
</code></pre>


blocks|key|1397485|text|this.optionsthis.selectedIndex.innerText|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1397486|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>this.options[this.selectedIndex].innerText</p>


blocks|key|1612240|text|使用select+list对象标识其自己的选定选项索引。从那里-抓取该索引的内部HTML。现在，您有了该选项的文本字符串。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1612241|<select+onchange="alert(this.options[this.selectedIndex].innerHTML);">
+++++++<option+value="">Select+Actions</option>
+++++++<option+value="1">Print+PDF</option>
+++++++<option+value="2">Send+Message</option>
+++++++<option+value="3">Request+Review</option>
+++++++<option+value="4">Other+Possible+Actions</option>
++++</select>|code-block|syntax|javascript|1612242|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>Use the select list object, to identify its own selected options index.
From there - grab the inner HTML of that index.
And now you have the text string of that option.</p>

<pre><code>&lt;select onchange="alert(this.options[this.selectedIndex].innerHTML);"&gt;
       &lt;option value=""&gt;Select Actions&lt;/option&gt;
       &lt;option value="1"&gt;Print PDF&lt;/option&gt;
       &lt;option value="2"&gt;Send Message&lt;/option&gt;
       &lt;option value="3"&gt;Request Review&lt;/option&gt;
       &lt;option value="4"&gt;Other Possible Actions&lt;/option&gt;
    &lt;/select&gt;
</code></pre>


blocks|key|1612281|text|您可以使用selectedIndex检索当前选定的option|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1612282|el+=+document.getElementById('elemId')
selectedText+=+el.options[el.selectedIndex].text|code-block|syntax|javascript|1612283|entityMap^0|5|D|P|6|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

<p>You can use <code>selectedIndex</code> to retrieve the current selected <code>option</code>:</p>

<pre><code>el = document.getElementById('elemId')
selectedText = el.options[el.selectedIndex].text
</code></pre>


blocks|key|1612316|text|简单易用的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1612317|const+select+=+document.getElementById('selectID');
const+selectedOption+=+[...select.options].find(option+=>+option.selected).text;|code-block|syntax|javascript|1612318|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>Easy, simple way:</p>

<pre><code>const select = document.getElementById('selectID');
const selectedOption = [...select.options].find(option =&gt; option.selected).text;
</code></pre>


blocks|key|1612370|text|可以与document.querySelector一起使用:checked选择器来检索选定的选项。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1612371|let+selectedText+=+document.querySelector('#selectId+option:checked').text;
//+or
let+selectedText+=+document.querySelector('#selectId')
++++++.querySelector('option:checked').text;|code-block|syntax|javascript|1612372|​|1612373|document.querySelector('button').addEventListener('click',+function(e)+{
++console.log(document.querySelector('#selectId+option:checked').text);
});|1612374|<select+id="selectId">
++<option>a</option>
++<option>b</option>
++<option>c</option>
</select>
<button>
Get+selected+text
</button>|1612375|1612376|对于具有multiple属性的选择元素，可以使用document.querySelectorAll来获取所有选择的选项。|1612377|let+selectedText+=+[...document.querySelectorAll('#selectId+option:checked')]
+++.map(o+=>+o.text);|1612378|1612379|document.querySelector('button').addEventListener('click',+function(e)+{
++let+selectedText+=+[...document.querySelectorAll('#selectId+option:checked')]
++++++++++++++++++++++.map(o+=>+o.text);
++console.log(selectedText);
});|1612380|<select+id="selectId"+multiple>
++<option>a</option>
++<option>b</option>
++<option>c</option>
</select>
<button>
Get+selected+text
</button>|1612381|1612382|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector|1|https://developer.mozilla.org/en-US/docs/Web/CSS/:checked|2|https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/multiple|3|https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll^0|3|M|T|8|3|M|0|T|8|1|0|0|0|0|0|0|4|8|O|P|4|8|2|O|P|3|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1F|8|@$9|1G|A|1H|B|C]|$9|1I|A|1J|B|C]]|D|@$9|1K|A|1L|1|1M]|$9|1N|A|1O|1|1P]]|E|$]]|$1|F|3|G|5|H|7|1Q|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1R|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|1S|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|H|7|1T|8|@]|D|@]|E|$I|J]]|$1|Q|3|L|5|6|7|1U|8|@]|D|@]|E|$]]|$1|R|3|S|5|6|7|1V|8|@$9|1W|A|1X|B|C]|$9|1Y|A|1Z|B|C]]|D|@$9|20|A|21|1|22]|$9|23|A|24|1|25]]|E|$]]|$1|T|3|U|5|H|7|26|8|@]|D|@]|E|$I|J]]|$1|V|3|L|5|6|7|27|8|@]|D|@]|E|$]]|$1|W|3|X|5|H|7|28|8|@]|D|@]|E|$I|J]]|$1|Y|3|Z|5|H|7|29|8|@]|D|@]|E|$I|J]]|$1|10|3|L|5|6|7|2A|8|@]|D|@]|E|$]]|$1|11|3|-4|5|6|7|2B|8|@]|D|@]|E|$]]]|12|$13|$5|14|15|16|E|$17|18]]|19|$5|14|15|16|E|$17|1A]]|1B|$5|14|15|16|E|$17|1C]]|1D|$5|14|15|16|E|$17|1E]]]]

<p>The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:checked" rel="nofollow noreferrer"><code>:checked</code></a> selector can be used with <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector" rel="nofollow noreferrer"><code>document.querySelector</code></a> to retrieve the selected option.</p>
<pre class="lang-js prettyprint-override"><code>let selectedText = document.querySelector('#selectId option:checked').text;
// or
let selectedText = document.querySelector('#selectId')
      .querySelector('option:checked').text;
</code></pre>
<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>document.querySelector('button').addEventListener('click', function(e) {
  console.log(document.querySelector('#selectId option:checked').text);
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select id="selectId"&gt;
  &lt;option&gt;a&lt;/option&gt;
  &lt;option&gt;b&lt;/option&gt;
  &lt;option&gt;c&lt;/option&gt;
&lt;/select&gt;
&lt;button&gt;
Get selected text
&lt;/button&gt;</code></pre>
</div>
</div>
</p>
<p>For select elements with the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/multiple" rel="nofollow noreferrer"><code>multiple</code></a> attribute, <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll" rel="nofollow noreferrer"><code>document.querySelectorAll</code></a> can be used to obtain all selected options.</p>
<pre class="lang-js prettyprint-override"><code>let selectedText = [...document.querySelectorAll('#selectId option:checked')]
   .map(o =&gt; o.text);
</code></pre>
<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>document.querySelector('button').addEventListener('click', function(e) {
  let selectedText = [...document.querySelectorAll('#selectId option:checked')]
                      .map(o =&gt; o.text);
  console.log(selectedText);
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select id="selectId" multiple&gt;
  &lt;option&gt;a&lt;/option&gt;
  &lt;option&gt;b&lt;/option&gt;
  &lt;option&gt;c&lt;/option&gt;
&lt;/select&gt;
&lt;button&gt;
Get selected text
&lt;/button&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1397677|text|这很简单。在javascript中，任何有ID的东西都不需要document.queryselector或$('#test')，只需使用测试即可。然后，您只需循环遍历selectedOptions，它是javascript的一部分，您可以将其添加到一个新数组中，并随心所欲地使用该数据。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1397678|let+selectedItems+=+[];
for+(+var+i+=+0;+i+<+test.selectedOptions.length;+i%2B%2B)+{
++++selectedItems.push(test.selectedOptions[i].text);
}|code-block|syntax|javascript|1397679|也是|1397680|//+if+you+want+values
selectedItems.push(test.selectedOptions[i].value);|1397681|entityMap^0|U|M|1H|A|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

<p>It is pretty simple.  In javascript anything with an ID doesn't need <code>document.queryselector</code> or <code>$('#test')</code> you can just use test.  Then you simply loop over the selectedOptions which is apart of javascript and you can add it to a new array and use that data how ever you want.</p>
<pre><code>let selectedItems = [];
for ( var i = 0; i &lt; test.selectedOptions.length; i++) {
    selectedItems.push(test.selectedOptions[i].text);
}
</code></pre>
<p>Also</p>
<pre><code>// if you want values
selectedItems.push(test.selectedOptions[i].value);
</code></pre>


<p>In the following: </p>

<pre><code>&lt;select id="test"&gt;
    &lt;option value="1"&gt;Test One&lt;/option&gt;
    &lt;option value="2"&gt;Test Two&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>How can I get the text of the selected option (i.e. "Test One" or "Test Two") using JavaScript</p>

<p><code>document.getElementsById('test').selectedValue</code> returns 1 or 2, what property returns the text of the selected option?</p>


Retrieving the text of the selected <option> in <select> element

jQuery

HTML5

在以下内容中：<select id="test">    <option value="1">Test One</option>    <option value="2">Test Two</option></select>如何获取所选选项的文本(即“测试一”或“测试二”)使用JavaScriptdocument.ge...

问正在检索<select>元素中所选<option>的文本
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问正在检索<select>元素中所选<option>的文本EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问正在检索<select>元素中所选<option>的文本
EN