[英]How to alert selected option text with JavaScript using onchange event
I'm having trouble alerting option's innerHTML when I use onchange event, so far I have came up to this solution which works as intended but I think there's an easier way of doing it by not using if , else if and else statements.当我使用 onchange 事件时,我在提醒选项的 innerHTML 时遇到了问题,到目前为止,我已经提出了这个按预期工作的解决方案,但我认为通过不使用if 、 else if和else语句可以更简单地做到这一点。 Actual question is how do I get option text?
实际问题是如何获取选项文本? I figured out how to get value but I still have trouble getting the text which I got value of.
我想出了如何获得价值,但我仍然无法获得我获得价值的文本。 TLDR How do I alert selected option?
TLDR 如何提醒选定的选项? ie
window.alert('You have selected ' + geometricShape);
ie
window.alert('You have selected ' + geometricShape);
<form>
<label id="izborNatpis" for="izbor">Geometrijski lik:</label>
<select onchange="izborLik()" id="izbor">
<option value="1">Pravokutnik</option>
<option value="2">Kružnica</option>
<option value="3">Pravokutni trokut</option>
</select>
<label id="natpis1" for="polje1">A:</label>
<input id="polje1" type="number">
<label id="natpis2" for="polje2">B:</label>
<input id="polje2" type="number">
<label id="natpis3" for="polje3">C:</label>
<input id="polje3" type="number">
<button type="button">Izračunaj</button>
</form>
<script>
function izborLik() {
let lik = document.getElementById('izbor').value;
if (lik == 1) {
window.alert("Odabrani geometrijski lik je Pravokutnik");
} else if (lik == 2) {
window.alert("Odabrani geometrijski lik je Kružnica");
} else {
window.alert("Odabrani geometrijski lik je Pravokutni trokut");
}
}
There are a several ways to achieve this.有几种方法可以实现这一点。 One of them:
其中之一:
function izborLik() {
// Find select element
const selectEl = document.querySelector('#izbor');
// Get selected value
const selectedValue = selectEl.value;
// Find selected option according to a selected value and get its inner text
const innerText = selectEl.querySelector(`option[value='${selectedValue}']`).innerText;
window.alert(`Odabrani geometrijski lik je ${innerText}`);
}
To access the text
value of the selected Option you can use the selectedIndex
property of the option
to access that option's text value as below.要访问所选选项的
text
值,您可以使用选项的selectedIndex
属性访问该option
的文本值,如下所示。
document.querySelector('#izbor').addEventListener('change',function(e){ alert( `Odabrani geometrijski lik je ${this.options[ this.options.selectedIndex ].text}` ); });
<select id="izbor"> <option value="1">Pravokutnik</option> <option value="2">Kružnica</option> <option value="3">Pravokutni trokut</option> </select>
To summarise the format would be:总结格式将是:
N.options[ N.options.selectedIndex ].text
Where N
is a reference to the parent SELECT
element.其中
N
是对父SELECT
元素的引用。 You can apply dataset
attributes to an option
that remain unseen by the casual user but which might be called upon with Javascript if required.您可以将
dataset
属性应用于临时用户看不到的option
,但如果需要,可以使用 Javascript 调用该选项。 To extend the previous brief example if every option
element had a dataset attribute called womble
you could easily access that dataset value like so:为了扩展前面的简短示例,如果每个
option
元素都有一个名为womble
的数据集属性,您可以像这样轻松访问该数据集值:
N.options[ n.options.selectedIndex ].dataset.womble
To simply access the value
of the option
then this.value
is sufficient ( in this context ) and if the option is of the form <option>Banana
then again this.value
should suffice as the text value is used as the value.要简单地访问
option
的value
,那么this.value
就足够了(在这种情况下),如果选项是<option>Banana
的形式,那么this.value
应该就足够了,因为文本值被用作值。
This is also way to go.这也是要走的路。
function izborLik()
{
let tmp=document.getElementById("izbor");
let x=tmp.value;
let lik="";
if (x==1) lik="Pravokutnik";
else if (x==2) lik="Kružnica";
else if (x==3) lik="Pravokutni trokut";
window.alert("Odabrani geometrijski lik: \n\t"+lik);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.