Javascript jQueryUI-如何从列表框进行多个切换？

我在表单中有一个列表框，根据其中的答案，我想使用JQuery UI的切换效果打开一个不同的切换：。代码在“查看源代码”下可见

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

选择你的选择
选择1
选择2
选择3

1：当您使用HTML

id

属性时，必须保证页面上没有其他HTML元素具有相同的id。您可以为每个切换使用不同的

id

：

$('#id1').toggle(...);
$('#id2').toggle(...);
$('#id3').toggle(...);

…或使用

类

选择器将相同的切换效果应用于所有3个：

$('div.toggle').toggle(...); //set all 3 to the same state

2：将事件侦听器绑定到select控件。更改选择后，您可以通过再次调用

toggle（）

来更改切换的状态（查看示例中如何实现

runEffect（）

）。一些jQuery教程很好地解释了如何绑定事件：

---

1：当您使用HTML

id

属性时，必须保证页面上没有其他HTML元素具有相同的id。您可以为每个切换使用不同的

id

：

$('#id1').toggle(...);
$('#id2').toggle(...);
$('#id3').toggle(...);

…或使用

类

选择器将相同的切换效果应用于所有3个：

$('div.toggle').toggle(...); //set all 3 to the same state

2：将事件侦听器绑定到select控件。更改选择后，您可以通过再次调用

toggle（）

来更改切换的状态（查看示例中如何实现

runEffect（）

）。一些jQuery教程很好地解释了如何绑定事件：

---

我对你的问题不是100%肯定，但是如果你只是想根据所选选项制作不同的动画，你可以这样做

HTML 不停摆弄

编辑 只需阅读您的问题，并了解您希望在每个选项中隐藏不同的元素。为此，您可以非常轻松地修改上面的jQuery

更新示例：

更新代码

$('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;
    }
});​

---

我不是100%确定你的问题，但如果你只是想根据所选选项制作不同的动画，你可以这样做

HTML 不停摆弄

编辑 只需阅读您的问题，并了解您希望在每个选项中隐藏不同的元素。为此，您可以非常轻松地修改上面的jQuery

更新示例：

更新代码

$('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;
    }
});​

---

嗨，Robert，我注意到在我用下拉框选择一个选项后，切换会立即向后翻转。为什么它们在被选中后不留在原来的位置呢？回调函数（

$（this）.show（）；

就在

幻灯片

部分之后）就在那里，这样您就可以重做动画而不必重新运行脚本。你只需删除回调函数，它们就会隐藏起来。嗨，Robert，我注意到在我用下拉框选择一个选项后，开关会立即向后翻转。为什么它们在被选中后不留在原来的位置呢？回调函数（

$（this）.show（）；

就在

幻灯片

部分之后）就在那里，这样您就可以重做动画而不必重新运行脚本。您只需删除回调函数，它们就会保持隐藏状态。