0

はい/いいえドロップダウンボックスを使用して、CSS を介して条件付きフォーム要素を非表示にしています。フォーム名と要素名を手動で定義するとうまくいきますが、変数を介して定義しようとすると機能しません。私は約1時間トラブルシューティングと調査を行ってきましたが、役に立ちませんでした。これが私のJavascript関数です。

function binaryHideShow(formName, elementName)
{
    if (document.forms["'" + formName + "'"].elementName.value == "yes")
    {
        document.getElementById("'" + elementName + "'").setAttribute("class","show");
    }
    else
    {
        document.getElementById("'" + elementName + "'").setAttribute("class","hide");
    }
}

そして、これが HTML 要素です。

<select name="PrimaryFiledBankruptcyDropDownList" onchange="binaryHideShow(this.form.name, this.attributes['name'].value);">
<option value=""></option>
<option value="yes">Yes</option>
<option value="no">No</option>
</select>

<div id="PrimaryFiledBankruptcyDropDownList">
<label for="PrimaryBankruptcyTypeDropDownList">Bankruptcy Type:</label> 
<select name="PrimaryBankruptcyTypeDropDownList" onchange="">
<option value=""></option>
<option value="chapter-7">Chapter 7</option>
<option value="chapter-13">Chapter 13</option>
</select>
</div>

HTML 側の this ステートメントが正しい要素をプルしていることを既に確認しています。

以下の例のように変数名を手動で入力すると、問題なく動作し、html this ステートメントは以下で使用している正確な名前を返します。

function binaryHideShow()
{
    if (document.forms["ProgramApplicationForm"].PrimaryFiledBankruptcyDropDownList.value == "yes")
    {
        document.getElementById("PrimaryFiledBankruptcyDropDownList").setAttribute("class","show");
    }
    else
    {
        document.getElementById("PrimaryFiledBankruptcyDropDownList").setAttribute("class","hide");
    }
}
4

4 に答える 4

1

フォーム内の要素にアクセスするための関数にエラーがあります。試してください:

function binaryHideShow(formName, elementName)
{
    if (document.forms[formName][elementName].value == "yes")
    {
        document.getElementById(elementName).setAttribute("class","show");
    }
    else
    {
        document.getElementById(elementName).setAttribute("class","hide");
    }
}
于 2012-07-12T21:09:12.320 に答える
0

私はそれを理解することになりました。document.forms の要素部分を使用するには、次のように内部の変数で elements[] を指定する必要があります。

function binaryHideShow(formName, elementName)
{
    if (document.forms[formName].elements[elementName].value == "yes")
    {
        document.getElementById(elementName).setAttribute("class","show");
    }
    else
    {
        document.getElementById(elementName).setAttribute("class","hide");
    }
}
于 2012-07-13T14:42:36.260 に答える
0

これで始められるはずです。

HTML

<form name="MyForm" id="MyForm">
    <select name="PrimaryFiledBankruptcyDropDownList"nchange="binaryHideShow(this,this.form);">
        <option value=""></option>
        <option value="yes">Yes</option>
        <option value="no">No</option>
    </select>
</form>

JavaScript

function binaryHideShow(element,form) {
    console.log("Element Name: " + element.name);
    console.log("Form Name: " + form.name);
    if(element.value == "yes") {
        console.log('sure does');
    } else {
        console.log('nope');
    }
}

トピックから外れていますが、これは便利だと思うかもしれません...

アクションをビューから分離することを検討してください。つまり、「onchange」イベントを取り除き、可能であれば jQuery の使用を検討してください。

あなたのためにいくつかの良い読み物：

于 2012-07-12T19:03:29.077 に答える
0

から変更する

document.forms["'" + formName + "'"]

に

document.forms[ formName ]

それ以外の場合は、"'PrimaryBankruptcyTypeDropDownList'" を実行したかのように名前を渡しています (二重引用符に注意してください)。

于 2012-07-12T18:52:59.800 に答える