分类导航

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了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);
});