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/

Answer 2

我认为开始的方法是这个小脚本：

<强> HTML

<select id="options" >
  <option data-item="showMoreContent1">ABC</option>
  <option data-item="showMoreContent2">XYZ</option>
</select>

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

<强> JavaScript的：

$(document).ready(function(){
    $('#options').change(function(){
        $('#helpPanel div').hide();
        $( "#options option:selected").each(function() {
            var targetDiv = $(this).attr("data-item");
            $('#'+targetDiv).show();
        });
    });
});

相关jsFiddle，您可以在其中测试我或您的代码。

Answer 3

JSFIDDLE LINK：http://jsfiddle.net/DDdJK/

<强> HTML

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

<强> CSS

.hiddenContent {
    display: none;
}

<强> JQuery的

$('#options').change(function(){
    if ($(this)[0].options[0].selected) {
        $("#showMoreContent1").show();
        $("#showMoreContent2").hide();
     }
    if ($(this)[0].options[1].selected) {
        $("#showMoreContent2").show();
        $("#showMoreContent1").hide();
     }
});

Answer 4

怎么样

HTML：

<select id="options" >
    <option value="1">ABC</option>
    <option value="2">XYZ</option>
</select>

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

JS：

$(document).ready(function(){
    $('#options').change(function(){
        $('.hiddenContent').hide();
        $('#showMoreContent' + $(this).val()).show();
    });
});

CSS

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

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

4 个答案: