显示和隐藏与选择标记divs

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/