2

A誰かが、、のjavascriptを表示するオプションを選択した場合A1、および、、、のjavascriptを表示することを選択した場合 にA2、 javascriptを表示したいと思います。したがって、およびBは、最初に選択タグからのオプションとして要求されますA3BB1B2B3A

例えば：

<select name="AorB" >
<option value="" selected="selected">Select...</option>
<option value="A" >Option A</option>
<option value="B" >Option B</option>
</select>

私はこの方法のjavascript（エラーアラート）を使用しています：

<SCRIPT language=JavaScript>
<!--
function check(form) {
if (form.Password.value == "")
{ alert("Please enter your Password."); form.Password.focus(); return;}
if (form.Password.value.length < 8)
{ alert("Please enter a valid Password."); form.Password.focus(); return;}
form.submit()
}
//-->
</SCRIPT>

PS：BオプションのJavaScriptを取得するためにAを選択したり、その逆を行ったりするときに、複雑になりたくありません。

追加-説明：オプションAを選択すると、いくつかの入力が表示されます....そしてjavascriptは表示された入力のみを要求するので、オプションAの入力を意味します...しかし要求しませんオプションBの入力-オプションBを選択しなかったため、表示されていなくても...少し説明していただければ幸いです。

4

2 に答える 2

0

selectタグの現在の値は、次の方法で簡単に確認できます。

alert(document.getElementById('AorB').value);

selectこれにより、タグの現在の値が警告されます。

onChangeその後、イベントによって値が変化するたびに値を確認できます。

<select id="AorB" onchange="alert(document.getElementById('AorB').value);">
<option value="" selected="selected">Select...</option>
<option value="A" >Option A</option>
<option value="B" >Option B</option>
</select>

使用できるjsFiffleの例を次に示します。

次に、値に応じてJavaScriptを実行できますが、コード全体を記述することはしません。

これがお役に立てば幸いです。

于 2012-11-07T23:42:41.290 に答える
0

あなたの質問について私が理解しているのは、選択ボックスが必要であり、これによってフォームに表示されるフィールドが決まるということです。次に、検証スクリプトで、表示されるフィールドのみを検証する必要があります。これはJQueryで処理するのが最適です。例を示すためのいくつかの実用的なコードと、フィドルを次に示します。

HTML

<div id="wrapper">
    <form id="myForm" name="myForm" method="POST" action="http://www.google.com">
        <select id="option" name="option">
            <option value="X">Choose One...</option>
            <option value="A">Option A</option>
            <option value="B">Option B</option>
        </select>
        <div id="optionset-a">
            <p>
                Input A1: <input name="a1" id="a1" class="option-a" type="textfield" /><br     />
                Input A2: <input name="a2" id="a2" class="option-a" type="textfield" /><br />
                Input A3: <input name="a3" id="a3" class="option-a" type="textfield" /><br />
            </p>
        </div>
        <div id="optionset-b">
            <p>
                Input B1: <input name="b1" id="b1" class="option-b" type="textfield" /><br     />
                Input B2: <input name="b2" id="b2" class="option-b" type="textfield" /><br />
                Input B3: <input name="b3" id="b3" class="option-b" type="textfield" /><br />
            </p>
        </div>
        <input type="submit" id="submit-button" name="submit" value="Submit" />
    </form>
</div>​

JQuery

$('#optionset-a').hide();
$('#optionset-b').hide();
$('#submit-button').hide();

$('#option').change(function() {
    if ($('#option').val() == 'A') {
        $('#optionset-b').hide();
        $('#optionset-a').show();
        $('#submit-button').show();
    } else if ($('#option').val() == 'B') {
        $('#optionset-a').hide();
        $('#optionset-b').show();
        $('#submit-button').show();
    }
});

$('#submit-button').click(function() {
    var validation = true;
    if ($('#option').val() == 'A') {
        $('.option-a').each(function() {
            if ($(this).val() == '') {
                $(this).css('border','1px solid red');
                validation = false;
            }
        });
    }
    if ($('#option').val() == 'B') {
        $('.option-b').each(function() {
            if ($(this).val() == '') {
                $(this).css('border','1px solid red');
                validation = false;
            }
        });
    }
    if (validation) {
        document.forms["myForm"].submit();
    } else { alert('Please fill in all fields.'); }
});​
于 2012-11-08T00:38:37.803 に答える