CODEWITHSUNDEEP
javascriptjquerycsshtml
phpnovice
phpnovice

Reputation: 25

Jquery div linked to multiple select values

Right now I have my drop down menu linked to the div id, but I would like for it to link to the div class so that a certain div could be shown in multiple selections-- overlapping categories so to speak. I'm not familiar with this so I would appreciate it if someone could help!

Here is what I have so far: 

<style>

.odd{
   background-color: #ccc;
  padding: 15px;
}

.even{
   background-color: #eee;
  padding: 15px;
}

  </style>


<script type="text/javascript">
$(function() {
    $("select").change(function() {
        var id = $("option:selected", this).val();
        $("div[id]").each(function() {
            $(this).toggle($(this).attr("id") == id);

        });
     $('.wrapper div:visible:even').css({
            'background-color': '#eee'
        });
        $('.wrapper div:visible:odd').css({
            'background-color': '#ccc'
        });
    });
});

</script>

other part:

<select>
<option value="">Choose one:</option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>

</select>


<div class="wrapper">
  <div id="option1" class="odd">content1</div>

  <div id="option2" class="even">content2</div>

  <div id="option3" class="odd">content3</div>

for instance, I want content3 to show for both option1 and option2.

Upvotes: 0

Views: 157

Answers (1)

Barmar
Barmar

Reputation: 781750

One way is to use hasClass() to tell which DIVs match the option.

JS:

$(function() {
    $("select").change(function() {
        var id = $(this).val();
        $("div[id]").each(function() {
            $(this).toggle($(this).hasClass(id));
        });
        $('.wrapper div:visible:even').css({
            'background-color': '#eee'
        });
        $('.wrapper div:visible:odd').css({
            'background-color': '#ccc'
        });
    });
});

HTML:

<div class="wrapper">
  <div id="option1" class="odd option1">content1</div>

  <div id="option2" class="even option2">content2</div>

  <div id="option3" class="odd option1 option2">content3</div>
</div>

Upvotes: 1

Related Questions