0

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

我有 3 个文件：

男权重.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>

女性重量.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>

新用户.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>

我有两个问题：

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

我试过了：

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

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

提前致谢！

最好的问候，卡斯帕

编辑：

一切都在下降的页面：http: //www.casperwmn.dk/tiljonas/nyprofil.php

4

4 回答 4

2

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

  1. 如果您想确保只能选择其中一个，您应该为两个单选按钮使用相同的名称。
  2. 您不应该将 JavaScript 放在您的选择元素中。一旦第一个.load()方法完成，它将删除整个 JavaScript，因为它替换了您的选择元素的内容。我也相当确定这样做是无效的 HTML（一个<select>元素只能将<option>元素作为子元素）。
  3. 您不能同时加载外部 JavaScript 文件并使用相同的<script>标签编写自己的 JavaScript，您必须有两个单独<script>的标签 - 一个用于加载 jQuery 源代码，一个用于编写您自己的 JavaScript。
  4. 您的<select>元素有两个 ID 属性，这不是有效的 HTML。删除其中一个，并使用您保留的一个作为 JavaScript 中的选择器。
  5. <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");
   });
});
于 2013-01-06T00:48:06.993 回答
1

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

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

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

将脚本块移动到<head>.

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

而且，你<select>有 2id秒。虽然不碍事，但不建议这样做。

于 2013-01-06T00:49:06.537 回答
0

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

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

于 2013-01-06T00:45:22.607 回答
0

根据 w3schools：

当用户单击一个单选按钮时，它会变为选中状态，而所有其他同名的单选按钮将变为未选中状态。

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

于 2013-01-06T00:47:32.497 回答