我正在开发一个具有表单的移动应用程序,其中有一些无线电选项。这是为了我的学习目的。
背后的基本思想是应用程序将在单选按钮中获取四个身体活动名称,然后根据该名称动态生成一个选择菜单。
我想出了一个解决方案,我将在单选按钮中使用练习名称,并使用 onClick() 将修改选择菜单。但不幸的是,onClick 不起作用。我在网上搜索了足够的时间,但没有找到可以理解的解决方案。
所以,我需要你的帮助。下面是我的代码。如果您能提出解决方案,请指导我并提及您的代码如何以及为什么在这里工作!
<!DOCTYPE html>
<head>
<script type="text/javascript">
function COptions(){
alert("hello World!");
//document.writeln("Hello World!");
} ;
</script>
<script>
try {
$(function() {
});
}
catch (error) {
console.error("Your javascript has an error: " + error);
}
</script>
</head>
<body>
<div data-role="page" data-control-title="Home" id="page1">
<div id="header" data-theme="a" data-role="header">
<h3 id="header_txt">
Calorie Burned
</h3>
</div>
<form name="form" id="form">
<div data-role="content">
<div class="form-input" data-role="fieldcontain" data-controltype="textinput">
<label for="textinput2">
Weight
</label>
<input name="weight" id="textinput2" placeholder="Enter weight (in lbs) " value="" data-mini="true"
type="number"/>
</div>
<div id="exercise_type" data-role="fieldcontain" data-controltype="radiobuttons" >
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<legend>
Choose Type of Exercise:
</legend>
<input id="radio1" name="exercise_type" value="" type="radio" onClick = "COptions()" >
<label for="radio1">
Walking
</label>
<input id="radio2" name="exercise_type" value="running" type="radio" onClick = "COptions()" >
<label for="radio2">
Running
</label>
<input id="radio3" name="exercise_type" value="cycling" type="radio" onClick = "COptions()" >
<label for="radio3">
Cycling
</label>
<input id="radio4" name="exercise_type" value="swimming" type="radio" onClick = "COptions()" >
<label for="radio4">
Swimming
</label>
</fieldset>
</div>
<div data-role="fieldcontain" data-controltype="selectmenu">
<label for="intensity">
Intensity:
</label>
<select id="intensity" name="intensity" data-mini="true">
<option value="option1">
</option>
</select>
</div>
<input class="button" data-icon="arrow-d" data-iconpos="top" value="Submit"
data-mini="true" type="submit">
</div>
<div id="footer" data-theme="a" data-role="footer" data-position="fixed">
<h3 id="footer_txt">
A simple calorie calculator
</h3>
</div>
</div>
</body>
</html>