Question

我在表单中有一个列表框，并根据我想要打开不同切换的答案，使用JQuery UI的切换效果：http://jqueryui.com/demos/toggle/。代码在'view source'下可见。

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

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

http://docs.jquery.com/Tutorials

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

JQuery UI - 如何从列表框中进行多次切换？

2 个答案:

HTML

的jQuery

小提琴

修改