Jquery下拉选择

时间:2012-01-16 05:11:44

标签: jquery

如何使用下拉框根据使用jQuery的下拉列表中的用户选择显示不同的表单?

1 个答案:

答案 0 :(得分:1)

监控选择列表的change事件。根据选择的值隐藏或显示表单。

http://jsfiddle.net/84dNc/

/* use classes to maximize performance when hiding/showing */
form  { display: none; height: 100px; width: 100%; border: 1px solid gray;}
form.active { display: block; }

$('select').change( function() {
    $('form.' + $(this).val()).addClass('active').siblings('form').removeClass('active');     
});

<select>
    <option value=""></option>
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>    
</select>

<form class="a">
    Form A
</form>

<form class="b">
    Form B
</form>

<form class="c">
    Form C
</form>