gpt4 book ai didi

javascript - HTML 表单 - 需要用户能够从下拉列表中选择一个选项,然后在另一个字段中输入数字吗?

转载 作者:太空宇宙 更新时间:2023-11-04 09:04:08 24 4
gpt4 key购买 nike

我正在为以下内容寻找一些 HTML 代码:

用户从菜单中选择一个选项并在另一个字段中输入数字的表单。然后,根据他们选择的选项,我需要执行显示在屏幕上的计算。例如:

这就是表单的样子......

你是什么类型的人?-下拉列表提供选项(A、B、C)你今年多大?-用户在此字段中输入一个数字 (user_age)计算按钮

点击计算按钮时:如果用户选择选项 A,则显示“user_age”除以 20。如果用户选择选项 B,则显示“aser_age”除以 10。如果用户选择选项 C,则显示“user_age”除以 5。

因此,用户会选择选项 A,在年龄字段中输入“80”,然后当他们单击“计算”时,数字“4”会出现在屏幕上。谁能帮我这个?看起来很简单。这是我目前所拥有的!

<select id="Type" name="Type">
<option selected="selected" value="None">None</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
What is your age? <input id="Age" type="number" />
<input id="Age" type="button" value="Calculate" />

最佳答案

构建您的 HTML 语法

<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#calculate').click(function(){
var dropdown = $('#dropdown').val();
var age = $('#age').val();
var output;
if(dropdown == 'A'){
output = age/20;
}
if(dropdown == 'B'){
output = age/10;
}
if(dropdown == 'C'){
output = age/5;
}
$('#outputlabel').text(output);
});
});
</script>
</head>
<body>
<form name='ageform' action=''>
<label>Age:</label><input type="text" id="age" size ='2'/>
<label>Option:</label>
<select id='dropdown'>
<option value='A'>A</option>
<option value='B'>B</option>
<option value='C'>C</option>
</select>
<input type='button' id='calculate' value='calculate' />
<label id='outputlabel'></label>
</form>
</body>
</html>

测试 fiddle :https://jsfiddle.net/u06s92pc/2/

关于javascript - HTML 表单 - 需要用户能够从下拉列表中选择一个选项,然后在另一个字段中输入数字吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42565037/

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