JavaScript从下拉框中添加元素

Question

嗨，伙计们，我正试着完成一个小任务，帮助用户选择正确的滑雪尺寸，这样他们就可以进入那里的年龄和高度，以及他们会得到什么样的滑雪，所以自由式或古典滑雪，它会计算滑雪的长度。现在我想出了怎么用年龄和身高来做这件事。于是我走过去：

1-4岁:体长+0厘米。

5-8岁:体长+ 10厘米

9-12岁:体长+ 15厘米等

那部分运作得很好。但我现在要做的是，当用户选择经典时，它在最终尺寸上增加10厘米，当他们选择自由泳时，它会多加20厘米。然而，这一部分我不确定如何完成，需要帮助。

HTML：

<form name="sizeForm">
Age: <input type="text" name="age" size="10"><br />
Height: <input type="text" name="height" size="10"><br />
                 <select name="typeski" class="select" id="name" autocomplete="off" placeholder="Type of ski" >
        <option value="" disabled selected hidden>Please Select Type Of Skis. . . . . . .</option>
        <option value="0">Classic</option>
        <option value="1">Freestyle</option>
                </select>
<input type="button" value="Calculate Size" onClick="finalsize()"><br />
Your Ski Size: <input type="text" name="ski" size="10"><br />
<input type="reset" value="Reset" />
</form>

联署材料：

function finalsize() {
  var age = parseInt(document.sizeForm.age.value)
  var height = parseInt(document.sizeForm.height.value)
  var typeski = parseInt(document.sizeForm.typeski.value)
  if (age > 0 && height > 0) {   
    var size = height;
    if (age > 1 && age <= 4) size += 0;
    else if (age >= 5 && age <= 8) size += 10;
    else if (age >= 9 && age <= 12) size += 15;
    document.sizeForm.ski.value = size;
  }
  else {
    alert("Please Fill in everything correctly")
  }
}

希望在修复了这个之后，我会尝试把它变成一个vue.js应用程序，因为它看起来更好，等等，但是现在我试着解决这个问题。

再次感谢

Answer 1

最简单的方法就是使类型选项的value等于要为该类型添加的数量。

然后直接将控件的value添加到大小上即可。或者，您可以使用一个查找表，但这更简单。

在下面的示例中，我使用了+10表示经典，+20用于Freestyle，因为您的问题说两者都是+10，这似乎是一个错误:)

​

function finalsize() {
  var age = parseInt(document.sizeForm.age.value)
  var height = parseInt(document.sizeForm.height.value)
  var typeski = parseInt(document.sizeForm.typeski.value)
  if (age > 0 && height > 0) {   
    var size = height;
    if (age > 1 && age <= 4) size += 0;
    else if (age >= 5 && age <= 8) size += 10;
    else if (age >= 9 && age <= 12) size += 15;
    
    size += typeski
    document.sizeForm.ski.value = size;
  }
  else {
    alert("Please Fill in everything correctly")
  }
}

<form name="sizeForm">
Age: <input type="text" name="age" size="10"><br />
Height: <input type="text" name="height" size="10"><br />
                 <select name="typeski" class="select" id="name" autocomplete="off" placeholder="Type of ski" >
        <option value="0" disabled selected hidden>Please Select Type Of Skis. . . . . . .</option>
        <option value="10">Classic</option>
        <option value="20">Freestyle</option>
                </select>
<input type="button" value="Calculate Size" onClick="finalsize()"><br />
Your Ski Size: <input type="text" name="ski" size="10"><br />
<input type="reset" value="Reset" />
</form>

​

Answer 2

您应该阅读选择了哪个选项：

var sel = document.skiForm.typeski;
 var t= sel.options[sel.selectedIndex].text;

现在，您应该比较这些值，并添加额外的cm：

if(skitype == "Classic") size += ....;
if(skitype == "Freestyle") size += ....;

Answer 3

只需使用typeski变量，然后执行if else或switch语句：

switch (typeski)
{
   case 0: //classic
      size += 10;
   break;
   case 1: //freestyle
       size += 10; //You said 10cm in your post. Change it if you need to.
   break;
}

下面是一个有用的小提琴：https://jsfiddle.net/vs2fu9qq/3/