在下拉选择更改时显示多个 DIVS答案

【问题标题】：Show Multiple DIVS on Dropdown select change在下拉选择更改时显示多个 DIVS
【发布时间】：2013-06-23 16:20:57
【问题描述】：

朋友

我有一个下拉选择值即

<div class="controls left-padded-controls">
<form:select id="selectField" class="input-medium" path="">
<option value="option1">Test flow1</option>
<option value="option2">Test flow2</option>
</form:select>    
</div>

现在根据上面选择的下拉选项，我有

<label class="control-label left-padded-control-label"><spring:message code="message.description"></spring:message>:&nbsp; 
</label>
<div id="option1" class="box">Content 1</div>
<div id="option2" class="box">Content 2</div>
<br/>

还有

<label class="control-label left-padded-control-label"><spring:message code="message.dynamic.audio.files"></spring:message>:&nbsp;              </label>
<div id="option3" class="box">Content 3</div>
<div id="option4" class="box">Content 4</div>

现在基于下拉选项，即 testflow 1 我想显示 div id "option1" 和 "option3" 在选择 testflow2 时，我想显示 div id="option2" 和 "option4"

要实现上面我的JQuery代码是

$(document).ready(function () {
    $('.box').hide();
    $('#option1').show();
     $('#option2').show();
    $('#selectField').change(function () {
        $('.box').hide();
        $('#'+$(this).val()).show();
    });
});

但它没有按预期工作，请提出合适的更改，

非常感谢

【问题讨论】：

标签： jquery

【解决方案1】：

$(document).ready(function () {
    $('.box').hide();
    $('#option1').show();
    $('#option2').show();
    $('#selectField').change(function () {
        $('.box').hide();
        var option = $(this).val();
        $('#'+option).show();
        $('#'+(option=="option1" ? "option3" : "option4")).show();
    });
});

jsFiddle example

【讨论】：