0

チェックされているラジオボタンに応じて、選択リストの動的更新を取得しようとしています。

私は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>

私には2つの問題があります：

  1. ラジオボタンが壊れているようです。両方を同時に選択でき、「チェックを外す」ことはできません。-スクリプトが正しく機能しないことが原因でしょうか？
  2. いずれかのラジオボタンをクリックしても、選択リストは更新されません。

私が試してみました：

  • 含む（ファイルに名前を付けるだけです例：maleweight.php）。
  • Javascript（動作させることができませんでした）。
  • ロードの代わりに.get。
  • .checked==trueを試しました
  • SOにリストされているさまざまなソリューション（まったく同じではない）を試しました。

それらのNietherは私のために働くでしょう。私は何が欠けていますか？

前もって感謝します！

よろしく、キャスパー

編集：

すべてがダウンしているページ：http：//www.casperwmn.dk/tiljonas/nyprofil.php

4

4 に答える 4

2

あなたのコードには明らかな問題がいくつか見られます。

  1. どちらか一方のみを選択できるようにする場合は、両方のラジオ ボタンに同じ名前を使用する必要があります。
  2. JavaScript を select 要素内に配置しないでください。最初のメソッドが完了するとすぐに.load()、select-element のコンテンツが置き換えられるため、JavaScript 全体が削除されます。また、そうするのは無効な HTML であることもかなり確信しています (要素は子として<select>のみ<option>要素を持つことができます)。
  3. 外部 JavaScript ファイルのロードと独自の JavaScript の記述の両方を同じ<script>タグで行うことはできません<script>。1 つは jQuery ソースのロード用で、もう 1 つは独自の JavaScript を記述するための 2 つの別個のタグが必要です。
  4. <select>要素に 2 つの ID 属性がありますが、これは有効な HTML ではありません。そのうちの 1 つを削除し、残っているものを 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 を使用してコンテンツをロードしているので、それを完全なソリューションに使用してみませんか? ラジオボタンの名前を saygenderに変更し、値を male/female に変更し、インラインの onlick-attribute を削除した場合。そうすれば、小さな 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>。

<script>また、属性を持つタグ内に js を配置することはできません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 に答える