jQuery UI-如何从listBox进行多个切换？

Question

我有一个表单形式的列表框，并且根据其中的答案，我想使用JQuery UI的切换效果打开另一个切换： http : //jqueryui.com/demos/toggle/ 。 该代码在“查看源代码”下可见。

第1部分 ：当前形式的代码不支持一页上的多个切换。 如何才能以不同的方式重写javascript和div的id，以便多个切换响应多个链接？

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

Answer 1

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

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

...或使用class选择器将相同的切换效果应用于所有3：

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

2：将事件侦听器绑定到选择控件。 更改选择后，可以通过再次调用toggle()来更改切换的状态（请看示例中runEffect()的实现方式）。 一些jQuery教程对如何绑定事件有很好的解释：

http://docs.jquery.com/教程

Answer 2

对于您的问题，我不是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;
    }
});​

小提琴

http://jsfiddle.net/HJYYj/

编辑

只需阅读您的问题，即可了解每个选项都希望隐藏不同的元素。 您可以为此轻松修改上面的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;
    }
});​