2016-10-28 4 views
1

Я пытаюсь написать кусок кода JS, который получит выбранный вариант из формы HTML <select>, прочитайте его, а затем верните мне что-нибудь в зависимости от того, какой вариант был ,Получение JS для чтения выбора из HTML <select> form

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

Я застрял на этом в течение почти двух часов в настоящее время, я попробовал несколько вещей но пока ничего не работает.

+2

И функция 'option' внутри функции должна магически получать значение от того, где именно, если вы не передаете какой-либо параметр в вызове функции ...? – CBroe

+0

@arszenik, если вы получите -1, это ваше решение легко, вы упускаете из виду что-то вроде с глаз долой. –

+1

'onchange =" getmh (this.value) ". – nnnnnn

ответ

0

Как @nnnnnn упоминается в Above comment, вы только передать выбранное значение 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>

+1

Спасибо большое, что заставило его работать, хотя я потратил впустую прошлый час на это, пока не понял, что мне тоже не хватает "}" – Arszenik

0

Я думаю, что вы собираетесь на длинный путь. Вы можете попробовать что-то вроде этого.

<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>