我有一个分为两个步骤的表格。第 2 步有 2 个不同的字段集,具体取决于第一步中选择的选项。所以你有步骤 1,然后是步骤 2a 和 2b。我不知道如何从下拉列表中提取值并使用它进入步骤 2a 或 2b。这是我的 HTML:
<fieldset class="step1">
<label>Options</label>
<select class="mySelect">
<option value="steb2a">Step 2a</option>
<option value="steb2b">Step 2b</option>
</select>
<a class="nextStep">Next</a>
</fieldset>
<fieldset class="step2a">
<label>Question 2a</label>
<input type="text" />
</fieldset>
<fieldset class="step2b">
<label>Question 2b</label>
<input type="text" />
</fieldset>
这是我的javascript:
$(document).ready(function () {
$(".step2a").addClass("hidePanel");
$(".step2b").addClass("hidePanel");
$(".nextStep").click(function () {
$(".step1").addClass("hidePanel");
$('.mySelect').change(function () {
if ($(this).val() == 'step2a') {
$(".step2a").removeClass("hidePanel").addClass("showPanel");
} else if ($(this).val() == 'step2b') {
$(".step2b").removeClass("hidePanel").addClass("showPanel");
}
});
});
});
这对我来说看起来很合乎逻辑,但它不起作用,它隐藏了第一个字段集 OK 但没有将“showPanel”类添加到下一个字段集中。我犯了一个简单的错误,还是我完全错误地接近这个?任何帮助表示赞赏。我在这里创建了一个 jsfiddle: