如何使用 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);
    }