CODEWITHSUNDEEP
javascriptjquery
user3343724
user3343724

Reputation: 1

display 2 div's according to select options using jquery?

I am using the following code to display div's according to the select option in the HTML using jquery. this works fine.

however, I need to know how I can display both of them if the option front an back is selected?

here is my current code:

JS:

<script language="javascript">
    $(function() {
        $('#Field169').change(function(){
            $('.myDivs').hide();
            $('#' + $(this).val()).show();
        });
    });

</script>

html:

<div class="myDivs" id="Front" align="center>Front</div>

<div class="myDivs" id="Back" align="center>Back</div>


<select id="Field169">
<option value="WHAT DO I NEED HERE??">Front and Back</option>
    <option value="Front">Front Only</option>
    <option value="Back">Back Only</option>
</select>

Upvotes: 0

Views: 124

Answers (4)

Mir Gulam Sarwar
Mir Gulam Sarwar

Reputation: 2648

 $('#Field169').change(function(){
 var getvalue=$(this option: selected).text();
 if(getvalue=='Front and Back')
 {
 $('#front').show();
 $('#back').show();
 }
 });

Upvotes: 0

Pete
Pete

Reputation: 58462

You could leave the value blank and then change your jquery:

    $('#Field169').change(function(){
        var selectedValue = $(this).val();
        if (selectedValue === '') {
            $('.myDivs').show();
        } else {
            $('.myDivs').hide();
            $('#' + selectedValue).show();
        }
    });

Example

Upvotes: 0

Danny
Danny

Reputation: 1758

You can't do it if you're referencing by IDs, but if you gave them classes with those same names instead, and your option values looked like .front and .back then your combined option could have the value value=".front, .back" and the selector would get both of them. You would want to change the function to look like:

$($(this).val()).show();

rather than selecting by ID

Upvotes: 1

progysm
progysm

Reputation: 1072

<option value="Front, #Back">Front and Back</option>

Upvotes: 1

Related Questions