用select标签显示和隐藏div

Question

我正在尝试显示有关选择选择标记的内容。我正在使用change（）函数来做到这一点，但它并没有真正在变化中找到正确的内容。这是小提琴

http://jsfiddle.net/sghoush1/NhL2V/

html看起来像这样

<table id="formTable">
                <tr>
                    <td align="right">Investment cycle:</td>
                    <td>
                    <select class="selectOption">
                        <option>Jan12</option>
                        <option>Feb12</option>
                        <option>Mar12</option>
                    </select>
                    </td>
                </tr>   
                <tr>
                    <td align="right">Subsequent investments will occur on:</td>
                    <td>
                        <div id="changingArea">
                            <div class="descContent">Content A</div>
                            <div class="descContent">Content B</div>
                            <div class="descContent">Content C</div>
                        </div>
                    </td>   
                </tr>
            </table>

jquery看起来像这样

$(function() {

    $('.selectOption').change(function(){
        $('.descContent').hide();
        $('.descContent').eq($(this).index('.selectOption')).show();
    });

});

Answer 1

如果要获取所选选项元素的索引，可以使用DOM HTMLSelectElement对象的selectedIndex属性。

//  You can chain the methods
$('.descContent').hide().eq(this.selectedIndex).show();

http://jsfiddle.net/NhL2V/2/