Question

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

我有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>

我有两个问题：

单选按钮似乎坏了，我可以同时选择两个，我不能“取消选中”它们。 - 也许是因为剧本没有正常工作？
当我点击任一单选按钮时，选择列表不会更新。

我试过了：

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

他们中的其他人将为我工作。我错过了什么？

提前致谢！

祝你好运，卡斯帕

编辑：

所有内容都落入的页面：http://www.casperwmn.dk/tiljonas/nyprofil.php

Answer 1

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

如果您想确保只选择一个单选按钮，则应对两个单选按钮使用相同的名称。
您不应将JavaScript放在select元素中。第一个.load()方法完成后，它会删除整个JavaScript，因为它会替换select元素的内容。我也非常确定这样做是无效的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的正确方法。而不是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");
   });
});

Answer 2

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

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

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

将脚本块移到<head>。

中

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

而且，您的<select>有2 id秒。虽然它不会妨碍，但不建议这样做。

Answer 3

单独的jquery include和你的脚本，并将你的脚本移到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>

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

Answer 4

根据w3schools：

当用户点击一个单选按钮时，它会被检查，并且全部被检查其他具有相同名称的单选按钮变为未选中状态。

您应该更改radiobuttons名称属性，使它们具有相同的名称。

根据radiobutton动态更新选择

4 个答案: