javascript - 如何使用 jQuery 根据选择显示/隐藏 div？

Question

使用 jQuery，我想根据用户的选择显示一组不同的文本。由于我是 jQuery 的新手，我想看看是否有更简洁的方法来写出来？我当前的代码运行良好，但希望在我进一步操作之前可以更快地完成此操作的其他功能上的任何输入。谢谢!

HTML:

<div>
    <label>Select:</label>
    <select class="toggle_div" />
        <option value="">Select</option>
        <option value="a">A</option>
        <option value="b">B</option>
    </select>
</div>

<div id="group_a"> 
   Text A
</div>

<div id="group_b">
   Text B
</div>

jQuery:

$(document).ready(function() {

    $('#group_a').hide();
    $('#group_b').hide();

    $('.toggle_div').on('change',function(){

        if($(this).val() == "a"){
            $('#group_a').show();
            $('#group_b').hide();
        }

        if($(this).val() == "b"){
            $('#group_a').hide;
            $('#group_b').show();
        }

        if($(this).val() == ""){
            $('#group_a').hide();
            $('#group_b').hide();
        }       

    })  

});

Answer 1

这个怎么样:

$('#group_a').toggle($(this).val() == 'a');
$('#group_b').toggle($(this).val() == 'b');