根据单选按钮动态更新选择答案

【问题标题】：Dynamic update of select depending on radiobutton根据单选按钮动态更新选择
【发布时间】：2012-12-20 03:03:10
【问题描述】：

我试图根据选中的单选按钮动态更新我的选择列表。

我有 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&oslash;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&aelig;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>

我有两个问题：

单选按钮似乎坏了，我可以同时选择两个，我不能“取消选中”它们。 - 可能是因为脚本无法正常运行？
当我单击任一单选按钮时，选择列表不会更新。

我试过了：

包括（只是将文件命名为：maleweight.php）。
Javascript（无法使其工作）。
.get 而不是加载。
试过 .checked == true
尝试了 SO 上列出的不同解决方案（不完全相同）。

它们都不适合我。我错过了什么？

提前致谢！

最好的问候，卡斯帕

编辑：

一切都失败的页面：http://www.casperwmn.dk/tiljonas/nyprofil.php

【问题讨论】：

将类型从单选改为复选框
如果您为单选按钮指定相同的名称，您将只能选择其中一个。
将类型更改为复选框提示帮助。而且我有可能同时检查，而不仅仅是一个。谢谢克里斯托弗，不同的名字是当我尝试另一种解决方案时，只是错过了再次重命名它们！ :-) 列表不会更新。

标签： javascript jquery html forms radio-button

【解决方案1】：

我发现您的代码存在一些明显的问题。

如果您想确保只能选择其中一个，您应该为两个单选按钮使用相同的名称。
您不应该将 JavaScript 放在您的选择元素中。第一个 .load() 方法完成后，它将删除整个 JavaScript，因为它替换了您的选择元素的内容。我也相当确定这样做是无效的 HTML（<select> 元素只能有 <option> 元素作为子元素）。
您不能同时加载外部 JavaScript 文件并使用相同的 <script> 标签编写自己的 JavaScript，您必须有两个单独的 <script> 标签 - 一个用于加载 jQuery 源代码，一个用于编写您自己的JavaScript。
您的 <select> 元素有两个 ID 属性，这不是有效的 HTML。删除其中一个，然后将您保留的一个用作 JavaScript 中的选择器。
<script language="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"> 不是加载 JavaScript 的正确方法。应该是 type="text/javascript"，而不是 language="text/javascript"，但您也可以完全摆脱该属性，因为 JavaScript 是 <script> 元素的默认语言。

既然您使用 jQuery 来加载内容，为什么不将它用于完整的解决方案呢？如果您将单选按钮的名称更改为 gender，并将值更改为男/女，并删除内联的 onlick 属性。然后你可以用一小块 jQuery 来完成。

$(function() {
   $("input[name='gender']").on("click", function() {
        var gender = $(this).val();
        $("#weight").load(gender + "weight.html");
   });
});

【讨论】：

刚刚将它移到中，但它仍然没有更新：-/
试过你建议的代码，但列表仍然不会为我更新 :-( 如果你需要查看所有代码，我已经在帖子底部的链接中进行了编辑。
@Evilunclebill 您在页面Uncaught ReferenceError: $ is not defined 上收到一个JS 错误，这表明您没有正确加载jQuery。我在列表 (5) 中添加了另一个点，这解释了为什么 jQuery 没有被加载。
解决了！非常感谢！
@Evilunclebill 我的荣幸！

【解决方案2】：

单选按钮似乎坏了，我可以同时选择两个，我不能“取消选中”它们。 - 可能是因为脚本不能正常工作？

您必须为它们分配相同的name 属性。这会将它们放在同一个组中，因此不能同时选择它们。

当我单击任一单选按钮时，选择列表不会更新。

将脚本块移入<head>。

此外，您不能将 js 放在具有 src 属性的 <script> 标记中。您必须使用新的<script> 标记。

而且，您的 <select> 有 2 个 ids。虽然不碍事，但不建议这样做。

【讨论】：

删除了第二个 id 并尝试了您的建议，但仍然无法正常工作：-/

【解决方案3】：

根据 w3schools：

当用户单击单选按钮时，它会变为选中状态，并且所有其他具有相同名称的单选按钮变为未选中状态。

您应该更改单选按钮的名称属性，使它们具有相同的名称。

【讨论】：

谢谢 TwiNight :-) 我不知道会这样。

【解决方案4】：

将 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>

标签的名称属性应该相同。

【讨论】：