javascript - The event handler to select

Question

I took the example of the here, Demo 6

Everything works fine, however I can not figure out how to put handler, which would take from there value. That is, that when you change the selector to change "content." Here is the code of the selector:

    <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>

, But on the page is already displayed

 <div class="cd-dropdown">
    <span>Choose an animal</span>
    <input type="hidden" name="cd-dropdown">
    <ul>
        <li data-value="1"><span class="icon-monkey">Monkey</span></li>
        <li data-value="2"><span class="icon-bear">Bear</span></li>
        <li data-value="3"><span class="icon-squirrel">Squirrel</span></li>
        <li data-value="4"><span class="icon-elephant">Elephant</span></li>
    </ul>
   </div>

, I realized that this "transformation" occurs

jquery.dropdown.js

---

created 2 forms, forma1 with id = "f1", and similarly form2 c id = "f2", one form did hide. Put on Select

onChange="a(this.value)"

,

function a(value){  
$('#f' + value).show() 
if (value == 1) 
    $('#f2').hide() 
else
    $('#f1').hide()
}

Neutral select works, but this is not. If the console browser call a function with a certain value, for example: а(2) , all the normal output.

So like where to put the event handler, it checks the value of the hidden field???

Thanks in advance

Answer 1

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