gpt4 book ai didi

JavaScript 添加下拉框中的元素

转载 作者:行者123 更新时间:2023-12-03 03:24:45 25 4
gpt4 key购买 nike

大家好,我正在尝试完成一个小任务,帮助用户选择合适的滑雪尺寸,因此他们会输入年龄和高度以及他们会得到什么样的滑雪,所以自由式或经典,它会计算滑雪板的长度。现在我知道了当他们进入时如何根据年龄和高度来做到这一点。所以我就去了:

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

5-8岁:体长+10厘米

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

那部分工作正常。但我现在想做的是,当用户选择 classic 时,它会在最终尺寸上额外增加 10cm,而当用户选择 freestyle 时,它​​会额外增加 20cm 。然而这部分我不确定如何完成并且需要帮助。

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>

js:

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 应用程序,因为它似乎更好等等,但现在正在尝试解决这个问题

再次感谢

最佳答案

最简单的方法就是使类型选项的等于您要为该类型添加的金额。

然后只需将控件的直接添加到尺寸上即可。或者,您可以使用查找表,但这更简单。

在下面的示例中,我使用 +10 表示经典,+20 表示自由式,因为您的问题说 +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>

关于JavaScript 添加下拉框中的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46384588/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com