javascript - 下拉有 2 个选项，然后问题？

Question

我正在尝试制作一个包含 2 个问题的下拉菜单。说出问题 A 和问题 B。无论选择哪个，他们都会再得到 3 个问题，他们将用 1-10 的数字来回答。现在，如果他们选择 A，那就完美了。但如果他们选择 B，则第二个选项不起作用。几天来我一直在寻找一种方法来做到这一点，令我惊讶的是我找不到简单的方法。我不明白为什么这不起作用，因为他们输入的内容无论如何都会转到 box1、box2 或 box3。这是我的 fiddle

$('.myOptions').change(函数(){

$('.list').removeClass('active')
.filter('.' + $('.myOptions').children('option:selected').attr('value'))
.addClass('active');

});

$('#butt').click(函数 () {

Answer 1

问题是选项的值与分配给 .list 元素的类不同

解决方案是将options的值改为owner和not-owner

<option value="owner">Owner</option>
<option value="not-owner">Not Owner</option>

演示:Fiddle

如果你不想改变选项的值，那么你可以引入一个新的属性来解决这个问题

<option data-type="owner" value="under 45 years old">Owner</option>
<option data-type="not-owner" value="over 45 years old">Not Owner</option>

然后

$('.list').removeClass('active').filter('.' + $('.myOptions').children('option:selected').data('type'))
.addClass('active');

演示:Fiddle

更新:
另一个问题是分配给输入元素的重复 id，这里我建议的解决方案是使用 class 而不是 id，然后从事件 list 元素获取输入值。

<div class="list owner">
    <p>a</p>
    <input class="box1" type="text" size="2"/><br/>
    <p>b</p>
    <input class="box2" type="text" size="2"/><br/>
    <p>c</p>
    <input class="box3" type="text" size="2"/><br/>
    <!-- questions for owners -->
</div>

<div class="list not-owner">
    <p>x</p>
    <input class="box1" type="text" size="2"/><br/>    
    <p>y</p>
    <input class="box2" type="text" size="2"/><br/>
    <p>z</p>
    <input class="box3" type="text" size="2"/><br/>
    <!-- questions for non-owners -->
</div>

然后

var active = $('.list.active');

var $boxOne = active.find('.box1');
var k1 = parseInt($boxOne.val(), 10);
var $boxTwo = active.find('.box2');
var k2 = parseInt($boxTwo.val(), 10);

var $boxThree = active.find('.box3');
var k3 = parseInt($boxThree.val(), 10);
var total = k1 + k2 + k3;

演示:Fiddle