CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Brigitte Fellner
Brigitte Fellner

Reputation: 255

Select different options at an select form and show different content

I have a form where a 'select' with different options is needed. Every time someone clicks on an option a different content should appear. That's my solution (it works :) ), but as you can see on the length of the code, it is a very complicated on. I guess it would be easier with 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>

Upvotes: 2

Views: 2576

Answers (4)

roullie
roullie

Reputation: 2820

how about

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>

Upvotes: 0

Simon Staton
Simon Staton

Reputation: 4505

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();
     }
});

Upvotes: 0

Sam Battat
Sam Battat

Reputation: 5745

If I understand your question correctly, you can do the following in jquery to get the same result

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

Upvotes: 1

Martin
Martin

Reputation: 3286

I think a way to start will be this small script:

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();
        });
    });
});

And the relating jsFiddle where you can test my or your code.

Upvotes: 0

Related Questions