[Solved] The event handler to select

by


DEMO

HTML:

<select id="cd-dropdown" class="cd-select">
    <option value="-1" selected>Choose an animal</option>
    <option value="1" class="icon-monkey">Monkey</option>
    <option value="2" class="icon-bear">Bear</option>
    <option value="3" class="icon-squirrel">Squirrel</option>
    <option value="4" class="icon-elephant">Elephant</option>
</select>

<div id="div1" class="animalDiv">MONKEY</div>
<div id="div2" class="animalDiv">BEAR</div>
<div id="div3" class="animalDiv">SQUIRREL</div>
<div id="div4" class="animalDiv">ELEPHANT</div>

CSS:

.animalDiv {
 display:none;
}

JS/jQuery:

$(function() {
    $('#cd-dropdown').dropdown({
        gutter: 5,
        stack: false,
        delay: 100,
        slidingIn: 100,
        onOptionSelect: function(e) {
            var _counter = ($(e).html()).split('data-value="')[1].split('"')[0];
            $(".animalDiv").hide();
            $("#div" + _counter).show();
        }
    });
});​

*NOTE:
I should note that I also made a change in jquery.dropdown.js:

val !== -1 ? classes !== undefined ? optshtml += '<li><span data-value="' + val + '" class="' + classes + '">' + label + '</span></li>' : optshtml += '<li><span data-value="' + val + '">' + label + '</span></li>' : selectlabel = label;

moving data-value from li to span

1

solved The event handler to select