我以 here 为例, 演示6
一切正常,但我不知道如何放置处理程序,这将从那里获取值(value)。也就是说,当你改变选择器时改变“内容”。这是选择器的代码:
<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
创建了 2 个表单,id = "f1"的 forma1,以及类似的 form2 c id = "f2",其中一个表单确实隐藏了。穿上选择
onChange="a(this.value)"
,
function a(value){
$('#f' + value).show()
if (value == 1)
$('#f2').hide()
else
$('#f1').hide()
}
中性选择有效,但这不是。 如果控制台浏览器调用一个具有特定值的函数,例如: а(2) ,一切正常输出。
所以就像把事件处理程序放在哪里一样,它会检查隐藏字段的值???
提前致谢
最佳答案
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
关于javascript - 要选择的事件处理程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13958890/