jquery之根据选择值显示字段

我有以下挑战。

我有一个参赛表格，人们可以在其中添加新参赛作品，并且在获得批准后还可以对其进行编辑。 挑战是根据选择隐藏特定字段。 当用户添加新条目时，他们必须选择特定类别。基于此，一些字段被隐藏。

这是我到目前为止使用的代码:

<select name="entry.parent" size="1" style="width: 360px;" id="SPCatChooserSl" class="required"> 
<option value="">Selecteer categorie</option> 
<option  selected="selected" value="55">- Option 1</option> 
<option value="59">- Option 2</option> 
 
</select> 
 
<div id="option1"> 
<p>Hier comes option 1</p> 
</div> 
<div id="option2"> 
<p>Here comes option 2</p> 
</div> 
 
<script> 
jQuery(function() { 
jQuery('#option1').hide(); 
jQuery('#option2').hide(); 
 }); 
 
jQuery(function() { 
jQuery("#SPCatChooserSl").change(function() { 
    if (this.value == '55') { 
        jQuery('#option1').show(); 
    } else { 
        jQuery('#option1').hide(); 
    } 
    if (this.value == '59') { 
        jQuery('#option2').show(); 
    } else { 
        jQuery('#option2').hide(); 
    } 
    }); 
     }); 
   </script>     

当用户仍必须选择类别时，此方法有效。它根据选择隐藏字段。

但是，当用户编辑条目时，类别已被选择，并且可能不会更改。因此，DIVS option1 和 Option2 是隐藏的，并且由于用户没有选择类别，因此 div 将永远不可见。

所以问题是:如何检查选择列表中的特定值，在没有用户操作的情况下显示正确的字段。

我希望我的问题/挑战很清楚:)

提前致谢!!!!!!!

请您参考如下方法:

您可以在文档准备好后更新选项:

jQuery(function() { 
jQuery('#option1').hide(); 
jQuery('#option2').hide(); 
}); 
 
function updateOption() { 
    jQuery('#option1').toggle(this.value == '55'); 
    jQuery('#option2').toggle(this.value == '59'); 
} 
 
jQuery(document).ready(function() { 
    jQuery("#SPCatChooserSl").each(updateOption); 
    jQuery("#SPCatChooserSl").change(updateOption); 
}); 

fiddle :http://jsfiddle.net/Mwnjk/