要选择的事件处理程序

Question

我拿着的例子在这里, 演示6

一切正常,但我无法弄清楚如何放置处理程序,从那里取值.也就是说,当您更改选择器以更改"内容"时.这是选择器的代码:

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

,我意识到这种"转变"发生了

jquery.dropdown.js

---

创建了两个表单,form1,id ="f1",类似form2 c id ="f2",一个表单确实隐藏了.穿上选择

onChange="a(this.value)"

,

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

中性选择有效,但事实并非如此.如果控制台浏览器调用具有特定值的函数,例如: а(2),则所有正常输出.

所以喜欢把事件处理程序放在哪里,它会检查隐藏字段的值???

提前致谢

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();
        }
    });
});?

*注意: 我应该注意到我在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;

data-value从... 移动li到span