如何使用 onchange 事件使用 JavaScript 提醒选定的选项文本

Question

当我使用 onchange 事件时，我在提醒选项的 innerHTML 时遇到了问题，到目前为止，我已经提出了这个按预期工作的解决方案，但我认为通过不使用if 、 else if和else语句可以更简单地做到这一点。 实际问题是如何获取选项文本？ 我想出了如何获得价值，但我仍然无法获得我获得价值的文本。 TLDR 如何提醒选定的选项？ 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");
            }
        }

Answer 1

有几种方法可以实现这一点。 其中之一：

  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}`);
    
  }

Answer 2

要访问所选选项的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>

总结格式将是：

N.options[ N.options.selectedIndex ].text

其中N是对父SELECT元素的引用。 您可以将dataset属性应用于临时用户看不到的option ，但如果需要，可以使用 Javascript 调用该选项。 为了扩展前面的简短示例，如果每个option元素都有一个名为womble的数据集属性，您可以像这样轻松访问该数据集值：

N.options[ n.options.selectedIndex ].dataset.womble

要简单地访问option的value ，那么this.value就足够了（在这种情况下），如果选项是<option>Banana的形式，那么this.value应该就足够了，因为文本值被用作值。

Answer 3

这也是要走的路。

 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);
    }