Question

These select options are changed via a wordpress backend, as well as the following div tags.

What I need is for the corresponding div tag to show only when the select box is on that choice by what number child it is.

Example of code:

<form>
    <select class="select" name="SELECT_Mood_30">
        <option value="0"></option>
        <option value="hap">Happy</option>
        <option value="sad">Sadness</option>
        <option value="ang">Angry</option>
        <option value="gru">Grumpy</option>
    </select>
</form>

<ul id="show-these">
    <li></li>
    <li>Happy huh?</li>
    <li>Why so sad?</li>
    <li>Everything will be ok!</li>
    <li>Cheer up!</li>​​​​​​​​​​​​​​​​​​​​​​​​
</ul>

So basically I would like jquery to be able to know which number child is selected and show the same number child in the li ID “show-these”.

Answer 1

JS

var $ul = $('#show-these');
$ul.find('li').hide();

$('.select').on('change', function(){
    var index = $(this).find('option:selected').index();
    var $ul = $('#show-these');
    $ul.find('li').hide();
    $ul.find('li').eq(index).show();

});​

HTML

<div id="show-these">
    <li></li>
    <li>Happy huh?</li>
    <li>Why so sad?</li>
    <li>Everything will be ok!</li>
    <li>Cheer up!</li>​​​​​​​​​​​​​​​​​​​​​​​​
</div>

Check Fiddle