Javascript 使用select标记显示和隐藏div

我试图在选择select标记时显示内容。我正在使用change（）函数来实现这一点，但它并没有真正在更改中获取正确的内容。这是小提琴

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>

$(function() {

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

});

---

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

selectedIndex

属性

---

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

selectedIndex

属性

---

完美。谢谢你的完美解决方案。谢谢你的解决方案

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