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 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 に答える
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 に答える