javascript - 在选择表单中选择不同的选项并显示不同的内容

Question

我有一个表单，其中需要具有不同选项的“选择”。每次有人点击一个选项时，都会出现不同的内容。那是我的解决方案(有效 :))，但是正如您在代码长度上看到的那样，它非常复杂。我想使用 jQuery 会更容易吗？

HTML

<select onchange="optionCheck()" id="options" >
    <option>ABC</option>
    <option>XYZ</option>
</select>

<div id="showMoreContent1" class="hiddenContent">Content1 goes here</div>
<div id="showMoreContent2" class="hiddenContent">Content2 goes here</div>

JS

<script>
    function optionCheck() {
        selectOptions = document.getElementById("options");

        helpDiv1 = document.getElementById("showMoreContent");
        helpDiv2 = document.getElementById("showMoreContent2");

        if (selectOptions.options[1].selected) {
            helpDiv1.className = "visibleContent";
        } else {
            helpDiv1.className = "hiddenContent";
        }
        if (selectOptions.options[2].selected) {
            helpDiv2.className = "visibleContent";
        } else {
            helpDiv2.className = "hiddenContent";
            }
        }
</script>

CSS

<style>
    .hiddenContent {display: none;}
    .visibleContent {display: block;}​
</style>

Answer 1

如果我正确理解你的问题，你可以在 jquery 中执行以下操作以获得相同的结果

<select id="options" >
    <option>--</option>
    <option value="abc">ABC</option>
    <option value="xyz">XYZ</option>
</select>

<div id="content-abc" class="content hidden">Content1 goes here</div>
<div id="content-xyz" class="content hidden">Content2 goes here</div>

$(document).ready(function(){
    $("#options").change(function(){
        $(".content").addClass("hidden");
        $("#content-"+$(this).val()).removeClass("hidden");
    });
});

http://jsfiddle.net/mG3uC/