1

私の Web サイトは、ASP クラシックである VBScript で作成されています (私の選択ではなく、これまで経験したことのない言語です)。ドロップダウン メニューに、最初の選択内容に基づいて追加のドロップダウンが表示されます。これを実現するためにJavaScript関数を使用しようとしています。

例：

最初のドロップダウンで、ユーザーはアイスクリームまたはポテトチップスを選択します。ユーザーが選択した内容に基づいて、別のドロップダウンでフレーバーを選択できます。

アイスクリーム：バニラ、チョコレート、ミント。
ポテトチップス：塩漬け、チーズとタマネギ、塩と酢。

これは私のコードが現在どのように見えるかです:

HTML

<select id="food" onchange="fctCheck(this.value)">
    <option value="">Choose an item</option>
    <option value="icecream">Ice cream</option>
    <option value="crisps">Crisps</option>
</select>  


<select id="icecream" style="display:none">
    <option value="vanilla">Vanilla</option>
    <option value="chocolate">Chocolate</option>
    <option value="mint">Mint</option>
</select>  


<select id="crisps" style="display:none">
    <option value="readysalted">Ready Salted</option>
    <option value="cheeseandonion">Cheese and Onion</option>
    <option value="saltandvinegar">Salt and Vinegar</option>
</select>

.

JavaScript

function fctCheck(food)
    {
    if (food == "")
        {document.getElementById(food).style.display = "none";}
    else
        {document.getElementById(food).style.display = "block";}
    }
4

3 に答える 3

3

st3innthis.valueが述べたように、まったく問題ありませんdocument.getElement==>B<==yId。

ただし、コードには、ユーザーが両方のオプションを選択できるため、両方のサブ選択が表示されるという欠点があります。

選択したアイテムのサブセレクションを表示する前に、まずすべてのサブセレクションを非表示にすることで、これを回避できます。これはそのように行うことができます (追加の name-attribute を使用するか、jQuery を使用することを選択した場合は、代わりにより洗練された何かを行うことができます)。

JSFiddle の例 (コメント付き)

Javascript:

function fctCheck(food) {
    var elems = document.getElementsByName("subselector");
        for (var i = 0; i < elems.length; i++) {
            elems.item(i).style.display = "none";
        }
        document.getElementById(food).style.display = "block";
    }

HTML:

<select id="food"onchange="fctCheck(this.value);">
    <option value="">Choose an item</option>
    <option value="icecream">Ice cream</option>
    <option value="crisps">Crisps</option>
</select>  


<select id="icecream" name="subselector" style="display:none">
    <option value="vanilla">Vanilla</option>
    <option value="chocolate">Chocolate</option>
    <option value="mint">Mint</option>
</select>  


<select id="crisps" name="subselector" style="display:none">
    <option value="readysalted">Ready Salted</option>
    <option value="cheeseandonion">Cheese and Onion</option>
    <option value="saltandvinegar">Salt and Vinegar</option>
</select>

乾杯、
フロリアン

于 2013-11-01T14:27:43.300 に答える
0

option代わりに値を確認する必要があります。

fctCheck(this.options[ this.options.selectedIndex ].value)

this.options<option>現在の 内の要素のコレクションであり<select>、this.options.selectedIndex現在選択されているオプションを示す整数値です。

ところで、コードにタイプミスがあります:

document.getElementbyId

する必要があります

document.getElementById

jsFiddle のデモを見る

于 2013-11-01T13:58:28.303 に答える
0

タイプミスがあるだけです。

function fctCheck(food)
{
    if (food == "") {
        document.getElementById(food).style.display = "none";}
    } else {
        document.getElementById(food).style.display = "block";
    }
}

動作するはずです。

this.value

と同等です

this.options[this.options.selectedIndex].value
于 2013-11-01T14:10:20.593 に答える