Javascript 下拉2个选项，然后回答问题？

我正在做一个下拉列表，里面有两个问题。说出问题A和问题B。无论哪种选择，他们都会得到另外3个问题，他们会用数字1-10回答。现在，如果他们选择了一个合适的工作环境，它就完美了。但是如果他们选择B，第二个选项就不起作用了。几天来我一直在寻找一种方法来做到这一点，我很惊讶我没有找到一个简单的方法。我不明白为什么这不起作用，因为他们输入的任何内容都会进入box1、box2或box3。这是我的小提琴

$'.myOptions.changefunction{

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

})

---

$'butt'。单击函数{

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

解决方案是将选项的值更改为owner而不是owner

演示：

更新： 另一个问题是分配给输入元素的重复id，这里我建议的解决方案是使用类而不是id，然后从活动列表元素获取输入值

---

演示：

这可能是因为您正在选择选项值，并且实际上正在查找文本：

$('.myOptions').change(function(){
    var optionText = $(this).find('option:selected').text();
    $('.list').removeClass('active').filter('.' + optionText).addClass('active');
});

---

当您的文本显示not owner时，它也在搜索一类not owner，这是两个完全不同的东西。

仍然不起作用。请选择第二个选项。将显示no impute。您是对的，但我也有错误的值。@user2537145，这是因为您有重复的id属性值，id在文档运行中应该是唯一的。@p Johny您的老兄！！！你不知道我试了多久了！！

<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');

<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;

$('.myOptions').change(function(){
    var optionText = $(this).find('option:selected').text();
    $('.list').removeClass('active').filter('.' + optionText).addClass('active');
});