5

次の課題があります。

新しいエントリを追加し、承認されると編集もできるエントリ フォームがあります。課題は、選択に基づいて特定のフィールドを非表示にすることです。ユーザーが新しいエントリを追加するとき、特定のカテゴリを選択する必要があります。それに基づいて、いくつかのフィールドが非表示になっています。

これは私がこれまでに使用しているコードです:

<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 オプション 1 とオプション 2 は非表示になり、ユーザーがカテゴリを選択しないため、div が表示されることはありません。

質問は次のとおりです。選択リストで特定の値を確認するにはどうすればよいですか。ユーザーアクションなしで正しいフィールドを表示します。

私の質問/挑戦が明確であることを願っています:)

前もって感謝します！！！！！！！

4

1 に答える 1

1

ドキュメントの準備ができたら、オプションを更新できます。

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);
});

フィドル: http://jsfiddle.net/Mwnjk/

于 2012-10-22T09:03:00.710 に答える