Question

如果有人选择A选项以显示A1，A2，A3的javascripts以及是否选择{{{}我想要显示javascript 1}}显示B，B1，B2的javascripts。因此B3和 B 首先会将其作为选择标记中的选项提出

例如：

我正在使用这种javascript方式（错误提醒）：

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

P.S：当他们选择A来获得B选项javascripts或反向时，我不想做出并发症。

添加 - 解释：我的意思是如果我们选择OPTION A会显示一些Input-s ....而javascript只会询问所显示的输入-s所以它意味着OPTION A input-s ...但不是要求OPTION B输入 - 即使他们没有显示因为我们没有选择选项B ...我希望我为你解释一下。

Answer 1

您可以使用

轻松检查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>

Here is a jsFiffle example you can use.

然后你可以根据值来做一些JavaScript，但我不会把整个代码都写给你。

我希望这有帮助！

Answer 2

我对您的问题的理解是，您需要一个选择框，这将确定表单上显示的字段。然后，您希望验证脚本仅验证显示的那些字段。这最好用JQuery来处理。下面是一些提供示例的工作代码，以及fiddle。

<强> 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.'); }
});

表格验证（如果＆amp; then）

2 个答案: