我在表单中有一个列表框，根据其中的答案，我想使用 JQuery UI 的切换效果打开一个不同的切换:http://jqueryui.com/demos/toggle/ .代码在“查看源代码”下可见。
第 1 部分:当前形式的代码不支持在一个页面上进行多个切换。如何重写 javascript 并以不同方式标识 div，以便多个切换响应多个链接？
第 2 部分:然后我如何获取一个列表框(如下所示)并从两个切换的 div 中获取三个选项以进行选择？
<select class="toggle inputBox listBox" id="select" name="customer[option]">
<option>Choose Your Option</option>
<option value="1" rel="toggle[one]"> Option 1</option>
<option value="2" rel="toggle[one]"> Option 2</option>
<option value="3" rel="toggle[two]"> Option 3</option>
</select>
最佳答案
我不是 100% 肯定你的问题，但如果你只是想要基于所选选项的不同动画，你可以这样做
HTML
<div>Hey, what?</div>
<select>
<option>-</option>
<option>1</option>
<option>2</option>
</select>
jQuery
$('select').change(function() {
switch (this.selectedIndex) {
case 0:
break;
case 1:
$('div').fadeOut(300, function() {
$(this).show();
});
break;
case 2:
$('div').slideUp(300, function() {
$(this).show();
});
break;
}
});
fiddle
$('select').change(function() {
switch (this.selectedIndex) {
case 0:
break;
case 1:
$('div').fadeOut(300, function() {
$(this).show();
});
break;
case 2:
$('div').slideUp(300, function() {
$(this).show();
});
break;
}
});
编辑
只需阅读您的问题并了解您想要为每个选项隐藏不同的元素。为此，您可以很容易地修改上面的 jQuery。
更新示例: http://jsfiddle.net/yrNjS/
更新代码
$('select').change(function() {
switch (this.selectedIndex) {
case 0:
break;
case 1:
$('span').slideUp(500, function() {
$(this).show();
});
break;
case 2:
$('div').slideUp(500, function() {
$(this).show();
});
break;
}
});
关于javascript - JQuery UI - 如何从列表框进行多个切换？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3818231/