使下拉菜单选择一个js变量 [英] make a dropdown menu selection a js variable

问题描述

所以我有一个网站的下拉菜单，我希望所选的选项是js中的一个变量，所以我可以稍后打印/返回它。在此先感谢，我是javascript的新手。





JS我认为它是：

So I have a dropdown menu for a website and I want the selected option to be a variable in js so I can print/return it later on. Thanks in advance, I'm really new to javascript.


The JS I thought it is:

var P1 = document.getElementById("bammon1");
var Pokemon1 = P1.options[P1.3].text;

HTML

HTML

<label class="label">   Pokemon</label>
                <select id="bammon1">
                    <option>Please select a pokemon</option>
                        <option pokemon1=''>1) Simorgh</option>
                        <option pokemon1=''>2) --</option>
                        <option pokemon1=''>3) Flytrap</option>
                        <option pokemon1=''>4) Name Needed</option> 
                        <option pokemon1=''>5) Pandoze </option>
                        <option pokemon1=''>6) Apaflite </option>
                        <option pokemon1=''>7) Dendurus</option>
                        <option pokemon1=''>8) Bandirto</option>
                        <option pokemon1=''>9) --</option>
                        <option pokemon1=''>10) Tiflectum</option>
                        <option pokemon1=''>11) Sinder</option>
                        <option pokemon1=''>12) --</option>
                        <option pokemon1=''>13) Springfest</option>
                        <option pokemon1=''>14) Mirrage</option>
                        <option pokemon1=''>15) Skulprit</option>
                        <option pokemon1=''>16) --</option>
                        <option pokemon1=''>17) --</option>
                        <option pokemon1=''>18) Swelter</option>
                        <option pokemon1=''>19) Tundear </option>
                        <option pokemon1=''>20) Slimurk </option>
                        <option pokemon1=''>21) Sluborac</option>
                        <option pokemon1=''>22) Ogre </option>
                        <option pokemon1=''>23) Name Needed</option>
                        <option pokemon1=''>24) Name Needed</option>
                        <option pokemon1=''>25) Cychill </option>
                        <option pokemon1=''>26) Cydnidie</option>
                        <option pokemon1=''>27) Name Needed</option>
                        <option pokemon1=''>28) Name Needed</option>
                        <option pokemon1=''>29) Name Needed </option>
                        <option pokemon1=''>30) Farenheat </option>
                        <option pokemon1=''>31) Celsice</option>
                        <option pokemon1=''>32) --</option>
                        <option pokemon1=''>33) Spychic </option>
                        <option pokemon1=''>34) Murdoom </option>
                        <option pokemon1=''>35) --</option>
                        <option pokemon1=''>36) Name Needed </option>
                        <option pokemon1=''>37) Name Needed</option>
                        <option pokemon1=''>38) Name Needed </option>
                        <option pokemon1=''>39) Name Needed </option>
                        <option pokemon1=''>40) Name Needed </option>
                        <option pokemon1=''>41) Name Needed </option>
                        <option pokemon1=''>42) --</option>
                        <option pokemon1=''>43) --</option>
                        <option pokemon1=''>44) --</option>
                        <option pokemon1=''>45) --</option>
                        <option pokemon1=''>46) --</option>
                        <option pokemon1=''>47) --</option>
                        <option pokemon1=''>48) --</option>
                        <option pokemon1=''>49) --</option>
                        <option pokemon1=''>50) --</option>
                        <option pokemon1=''>51) Charidbyss </option>
                        <option pokemon1=''>52) --</option>
                        <option pokemon1=''>53) --</option>
                        <option pokemon1=''>54) --</option>
                        <option pokemon1=''>55) Faeum </option>
                        <option pokemon1=''>56) Wyvearn</option>
                        <option pokemon1=''>57) --</option>
                        <option pokemon1=''>58) --</option>
                        <option pokemon1=''>59) --</option>
                        <option pokemon1=''>60) --</option>

推荐答案

要获取所选项目，请使用 selectionIndex 属性：

To get the selected item, use the selectionIndex property:

var P1 = document.getElementById("bammon1");
var Pokemon1 = P1.options[P1.selectedIndex].text;

此外，我不知道为什么你的选项标签中有空的 pokemon1 属性，但我不认为它们应该是那里 - 它是无效的HTML。如果您确实想要在其中放入（并使用）值，请将属性名称以数据开头 - （例如， data-pokemon1 ）。这种属性称为数据属性： https://developer.mozilla.org/ en-US / docs / Web / Guide / HTML / Using_data_attributes [ ^ ]

Also, I don't know why you have empty pokemon1 attributes in your option tags, but I don't think they should be there -- it's invalid HTML. If you actually want to put (and use) values in them, make the attribute name start with data- (for example, data-pokemon1). This kind of attribute is called a data attribute: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes[^]

这篇关于使下拉菜单选择一个js变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！