让JS从HTML中读取选择<select>的形式

Getting JS to read the selection from a HTML <select> form

本文关键字：select JS HTML 读取 选择      更新时间：2023-09-26

我正试图写一段JS代码，将从HTML <select>表单中获得选定的选项，阅读它，然后根据选项是什么给我一些东西。

HTML代码如下所示:

<select id="mainhand" name="Main hand" onchange="getmh()">
    <option value="Sword" selected> Sword </option>
    <option value="Axe"> Axe </option>
    <option value="Mace"> Mace </option>
</select>
<p id="mhchoice">choice</p> 
<p id="mhdesc">description</p>
<p id="mhcost">cost</p>

和JS像这样:

function getmh(option){
    if (option == "Sword"){
       document.getElementById('mhchoice').innerHTML = 'Sword';
       document.getElementById('mhdesc').innerHTML = swordDesc;
       document.getElementById('mhcost').innerHTML = swordPrice;
       document.getElementById('ProductImage').src = 'sword.png';
    }
    if (option == "Axe"){
        document.getElementById('mhchoice').innerHTML = 'Axe';
        document.getElementById('mhdesc').innerHTML = axeDesc;
        document.getElementById('mhcost').innerHTML = axePrice;
        document.getElementById('ProductImage').src = 'axe.png';
    }    
    if (option == "Mace"){
        document.getElementById('mhchoice').innerHTML = 'Mace';
        document.getElementById('mhdesc').innerHTML = maceDesc;
        document.getElementById('mhcost').innerHTML = macePrice;
        document.getElementById('ProductImage').src = 'mace.png';
    }   
}

我已经被困在这个问题上将近两个小时了，我尝试了很多方法，但到目前为止似乎都没有效果。

正如上面注释中提到的@nnnnnn，您只需将选定的值this.value传递给函数:

<select id="mainhand" name="Main hand" onchange="getmh(this.value)">

希望对你有帮助。

function getmh(option){
  if (option == "Sword"){
    document.getElementById('mhchoice').innerHTML = 'Sword';
    document.getElementById('mhdesc').innerHTML = swordDesc;
    document.getElementById('mhcost').innerHTML = swordPrice;
    document.getElementById('ProductImage').src = 'sword.png';
  }
  if (option == "Axe"){
    document.getElementById('mhchoice').innerHTML = 'Axe';
    document.getElementById('mhdesc').innerHTML = axeDesc;
    document.getElementById('mhcost').innerHTML = axePrice;
    document.getElementById('ProductImage').src = 'axe.png';
  }    
  if (option == "Mace"){
    document.getElementById('mhchoice').innerHTML = 'Mace';
    document.getElementById('mhdesc').innerHTML = maceDesc;
    document.getElementById('mhcost').innerHTML = macePrice;
    document.getElementById('ProductImage').src = 'mace.png';
  }   
}
<select id="mainhand" name="Main hand" onchange="getmh(this.value)">
  <option value="Sword" selected> Sword </option>
  <option value="Axe"> Axe </option>
  <option value="Mace"> Mace </option>
</select>
<p id="mhchoice">choice</p> 
<p id="mhdesc">description</p>
<p id="mhcost">cost</p>

我认为你是在走长路。你可以试试这样做。

<select id="myValue" onchange="CheckValue()">
    <option value="1">Uno</option>
    <option value="2">Dos</option>
    <option value="3">Tres</option>
</select>
<script>
    function CheckValue() {
        var value = document.getElementById("myValue").value;
        switch (value) {
            // all your conditions
            default:
                //
        }
    }
</script>
相关文章：