2

我有一个表格，需要带有不同选项的“选择”。每次有人点击一个选项时，都会出现不同的内容。这是我的解决方案（它有效:)），但正如您在代码长度上看到的那样，这是一个非常复杂的问题。我想使用 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>
4

4 回答 4

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/

于 2013-08-28T15:02:36.457 回答
0

JSFIDDLE 链接：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();
     }
});
于 2013-08-28T15:06:28.287 回答
0

怎么样

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>
于 2013-08-28T15:07:57.350 回答
0

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

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，您可以在其中测试我或您的代码。

于 2013-08-28T15:02:06.247 回答