Django - 動的変更フォームフィールド

Question

私はデータベースにウェブサイトを追加するための簡単なフォームを持っています。これは私のサイトのモデルである：

class Site(models.Model): 
    category = models.ForeignKey('Category') 
    category1 = models.ForeignKey('Category', related_name='+',) 
    subcategory = ChainedForeignKey(
     'Subcategory', 
     chained_field='category', 
     chained_model_field='category', 
     show_all=False, 
     auto_choose=True) 
    name = models.CharField(max_length=70) 
    description = models.TextField() 
    # importuje zmienione TextFields widgets.py 
    keywords = MyTextField() 
    date = models.DateTimeField(default=datetime.now, editable=False) 
    url = models.URLField() 
    is_active = models.BooleanField(default=False) 
    group = models.CharField(max_length=2, choices=(('Basic', 
                'Basic'), ('Premium', 'Premium'))) 

subcategory1 = ChainedForeignKey(
    'Subcategory', 
    chained_field='category1', 
    chained_model_field='category1', 
    related_name='subcategory1', 
    show_all=False, 
    auto_choose=True) 

def get_absolute_url(self): 
    return "%s/%i" % (self.subcategory.slug, self.id) 

class Meta: 
    verbose_name_plural = "Sites" 

def __str__(self): 
    return self.name 

Forms.py

class SiteAddFormFull(forms.ModelForm): 

    url = forms.URLField(widget=forms.TextInput(attrs={'readonly': 'readonly'})) 

    class Meta: 
     model = Site 
     fields = ('url', 'name', 'description', 'keywords', 'group', 'category1','subcategory1') 

私は、グループフィールド（ 'プレミアムで値を選択し、ユーザーの後、フィールドのカテゴリ1'、「Subcategory1」を追加することによって、自分のフォームを変更したいです'）。フォームは自分自身を再読み込みし、それらのフィールドを表示する必要があります。 「プレミアム」フィールド「カテゴリ1」を選択する前に、「サブカテゴリ1」は見えないはずです。それをどうすれば実現できますか？私forms.pyで

私がコメントを追加しました：私の.jsで

widgets = {'category1': forms.HiddenInput(), 'subcategory1': 
        forms.HiddenInput()} 

が、私はそれらのフィールドを表示しようとするが、それは動作しませんファイル：私のページsoureで

$(":hidden").show(); 
// $("#id_category1".show() and other posibilities 

私が持っています

なぜ機能しないのですか？

Answer 1

カテゴリにはHiddenInputは必要ありません。 jqueryで非表示にして、選択した変更イベントで表示します。

<select id="group"> 
    <option value="First">First</option> 
    <option value="Premium">Premium</option> 
    <option value="Second">second</option> 
</select> 
<select id="category1"> 
    <option value="First">First</option> 
    <option value="Second">second</option> 
</select> 

のjQuery

$(document).ready(function(){ 
    $('#category1').hide(); 
    $('#group').change(function(e) { 
    var group = $(this).val(); 
    if (group == 'Premium'){ 
    $('#category1').show(); 
    } else { 
    $('#category1').hide(); 
    } 
    }); 
}); 

https://jsfiddle.net/fwfm9byy/1/