基于无线电按钮的选择的动态更新
根据选中的单选按钮，我试图获得我的选择列表的动态更新。
我有3份文件：
maleweight.html：
<option value="blank"></option>
<option value="Pluma -64.0 kg">Pluma -64.0 kg</option>
<option value="Pena -70.0 kg">Pena -70.0 kg</option>
<option value="Leve - 76.0 kg">Leve - 76.0 kg</option>
<option value="Médio -82.3 kg">Médio -82.3 kg</option>
<option value="Meio-Pesado -88.3 kg">Meio-Pesado -88.3 kg</option>
<option value="Pesado -94.3 kg">Pesado -94.3 kg</option>
<option value="Super Pesado -100.5 kg">Super Pesado -100.5 kg</option>
<option value="Pesadíssimo +100.5 kg">Pesadíssimo +100.5 kg</option>femaleweight.html：
<option value="blank"></option>
<option value="Rooster -48.5 kg">Rooster -48.5 kg</option>
<option value="Super Feather -53.5 kg">Super Feather -53.5 kg</option>
<option value="Feather -58.5 kg">Feather -58.5 kg</option>
<option value="Light - 64.0 kg">Light - 64.0 kg</option>
<option value="Middle -69.0 kg">Middle -69.0 kg</option>
<option value="Medium Heavy -74.0 kg">Medium Heavy -74.0 kg</option>
<option value="Heavy -79.3 kg">Heavy -79.3 kg</option>
<option value="Super Heavy -84.3 kg">Super Heavy -84.3 kg</option>
<option value="S. Super Heavy +84.3 kg">S. Super Heavy +84.3 kg</option>newuser.php：
<tr>
<td><b>Køn:</b></td>
<td><input type="radio" name="Mand" value="Mand" id="male" onclick="update()">Mand
<input type="radio" name="Kvinde" value="Kvinde" id="female" onclick="update()">Kvinde</td>
</tr>
<tr>
<td><b>Vægt:</b></td>
<td><select id="weight" name="vægt" id="selectv">
<script language="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js">
function update() {
if (document.getElementById('male').checked) {
$("#weight").load("maleweight.html");
}
else if (document.getElementById('female').checked) {
$("#weight").load("femaleweight.html");
}
}
</script>
</select></td>
</tr> 我有两个问题：
- 单选按钮似乎坏了，我可以同时选择，我不能“取消”他们。-也许是因为剧本写得不好？
- 当我单击任何一个单选按钮时，选择列表都不会更新。
我试过：
- 包括(仅命名文件ex: maleweight.php)。
- Javascript (无法使其工作)。
- .get而不是load。
- 尝试过.checked ==真
- 尝试了不同的解决方案(不完全相同)，这里列出了在SO上。
他们中的一个会为我工作的。我遗漏了什么？
提前感谢！
向你问好，卡斯珀
编辑：
每样东西都在下降的页面：http://www.casperwmn.dk/tiljonas/nyprofil.php
回答 4
Stack Overflow用户
发布于 2013-01-06 00:48:06
我发现您的代码存在一些明显的问题。
- 如果要确保只选择一个单选按钮，则应对两个单选按钮使用相同的名称。
- 不应该将JavaScript放在select元素中。一旦第一个
.load()方法完成，它将在替换select元素的内容时删除整个JavaScript。我还相当肯定这样做是无效的(<select>元素只能将<option>元素作为子元素)。 - 您不能同时加载外部JavaScript文件并使用相同的JavaScript标记编写自己的
<script>，您必须有两个单独的<script>标记-一个用于加载jQuery源，另一个用于编写您自己的JavaScript。 - 您的
<select>元素有两个ID属性，这是无效的。删除其中一个，并使用您保留的一个作为选择器在您的JavaScript。 <script language="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js">不是加载JavaScript的正确方式。而不是language="text/javascript"，它应该是type="text/javascript"，但是您可以一起去掉属性，因为JavaScript是<script>元素的默认语言。
既然您使用jQuery加载内容，为什么不将其用于完整的解决方案？如果将单选按钮的名称更改为gender，并将值更改为男性/女性，则删除内联onlick-属性。然后，您可以用一小块jQuery来完成这一切。
$(function() {
$("input[name='gender']").on("click", function() {
var gender = $(this).val();
$("#weight").load(gender + "weight.html");
});
});Stack Overflow用户
发布于 2013-01-06 00:49:06
单选按钮似乎坏了，我可以同时选择，我不能“取消”他们。-也许是因为剧本写得不好？
您必须为它们分配相同的name属性。这将它们放在同一个组中，这样就不能同时选择它们。
当我单击任何一个单选按钮时，选择列表都不会更新。
将脚本块移动到<head>中。
另外，您不能将js放入带有<script>属性的src标记中。您必须使用一个新的<script>标记。
而且，您的<select>有两个id，虽然它没有妨碍，但不建议这样做。
Stack Overflow用户
发布于 2013-01-06 00:45:22
单独使用jquery包含和脚本，并在head标记中移动脚本：
<script language="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"> </script>
<script>
function update() {
if (document.getElementById('male').checked) {
$("#weight").load("maleweight.html");
}
else if (document.getElementById('female').checked) {
$("#weight").load("femaleweight.html");
}
}
</script>标签的Name属性应该是相同的。
https://stackoverflow.com/questions/14178075
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号