Show div's based on Select options...

Hey Guys,

I'm having issues trying to create the code behind this. I'm trying to show/hide div's based on a select option selection, with at total of 4 options.

There are 2 select elements

<select>
	<option value="value1">Value 1</option>
	<option value="value2">Value 2</option>
</select>

<select>
	<option value="value3">Value 3</option>
	<option value="value4">Value 4</option>
</select>

Open in new window


The combinations would be

value1-value3
value1-value4

value2-value3
value2-value4

The second select element is empty until you select from the first select element and then you are able to select from the second element and it shows the div for that value.

The div's would be.

<div id="value-1-3">value1-value3</div>
<div id="value-1-4">value1-value4</div>

<div id="value-2-3">value2-value3</div>
<div id="value-2-4">value2-value4</div>

Open in new window


Can you guys help me to do this ?.
ismazzonAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
try this, i used a bit of jQuery since it's in your tags. I believe this is what you're looking for

script language="javascript">
function showDivs() { 
   var sel1 = $('#select1').val();
   var sel2 = $('#select2').val();

   if( sel1 == 'value1' && sel2 == 'value3' ) {
         $('#value-1-3').show();
         // run the code below to hide the other DIVS, not sure if this is a requirement
         $('#value-1-4').hide();
         $('#value-2-3').hide();
         $('#value-2-4').hide();
   } elseif( sel1 == 'value1' && sel2 == 'value4' ) {
         $('#value-1-4').show();
         // run the code below to hide the other DIVS, not sure if this is a requirement
         $('#value-1-3').hide();
         $('#value-2-3').hide();
         $('#value-2-4').hide();
   } elseif( sel1 == 'value2' && sel3 == 'value4' ) {
         $('#value-2-3').show();
         // run the code below to hide the other DIVS, not sure if this is a requirement
         $('#value-1-3').hide();
         $('#value-1-4').hide();
         $('#value-2-4').hide();
   } elseif( sel1 == 'value2' && sel2 == 'value4' ) {
         $('#value-2-4').show();
         // run the code below to hide the other DIVS, not sure if this is a requirement
         $('#value-1-3').hide();
         $('#value-1-4').hide();
         $('#value-2-3').hide();
   }
}
<script>

<select id="select1">
	<option value="value1">Value 1</option>
	<option value="value2">Value 2</option>
</select>

<select id="select2">
	<option value="value3">Value 3</option>
	<option value="value4">Value 4</option>
</select>

<div id="value-1-3">value1-value3</div>
<div id="value-1-4">value1-value4</div>

<div id="value-2-3">value2-value3</div>
<div id="value-2-4">value2-value4</div>

Open in new window

0
ismazzonAuthor Commented:
Saved it here: http://jsfiddle.net/eFLaD/ and it looks like it's not working... Can you confirm ?.
0
Alexandre SimõesManager / Technology SpecialistCommented:
Really quickly I did this:
http://jsfiddle.net/LppPn/2/

I believe you can tweak it from here.

Here's the full code for reference:
#content div { display: none; }

<select id="sel1">
    <option value="0"></option>
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
</select>
<select id="sel2" style="display: none;">
    <option value="0"></option>
    <option value="3">Value 3</option>
    <option value="4">Value 4</option>
</select>
<div id="content">
    <h2>Content Display</h2>
    <div id="div13">value1-value3</div>
    <div id="div14">value1-value4</div>
    <div id="div23">value2-value3</div>
    <div id="div24">value2-value4</div>
</div>

$('#sel1').on('change', function(){
    $('#content div').hide();
    if(parseInt(this.value) > 0){
        $('#sel2')
            .show()
            .find('option[value="0"]')
            .prop('selected', true);
    } else {
        $('#sel2').hide();
    }
});

$('#sel2').on('change', function(){
    $('#content div').hide();
    if(parseInt(this.value) > 0){
        var sel1Value = $('#sel1').val();
        var sel2Value = $('#sel2').val();
        $('#content div[id="div' + sel1Value + sel2Value + '"]').show();
    }
});

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.