Django. Как показать и скрыть DIV на основе выбора выпадающего меню?

Question

У меня есть выпадающее меню, и я хочу показать и скрыть DIVs на основе выбора этого выпадающего меню. У меня есть дублированные поля в шаблонах, потому что я не знаю, как лучше обращаться, поэтому, если кто-то может предложить мне более простой способ кодирования, я буду этому признателен.

Код я написал ниже

Template(html) 

<div id="pack-method" class="col-sm-30"> 
    {{ form.item_packmethod|as_crispy_field }} 
</div> 
<div id="hidden2-1"> 
    <div class="col-sm-20"> 
    {{form.pallet_count|as_crispy_field}} 
    </div> 
    <div class="col-sm-20"> 
    {{form.pallet_width|as_crispy_field}} 
    </div> 
    <div class="col-sm-20"> 
    {{form.pallet_height|as_crispy_field}} 
    </div> 
</div> 
<div id="hidden2-2"> 
    <div class="col-sm-20"> 
    {{form.pallet_count|as_crispy_field}} 
    </div> 
    <div class="col-sm-20"> 
    {{form.pallet_width|as_crispy_field}} 
    </div> 
    <div class="col-sm-20"> 
    {{form.pallet_height|as_crispy_field}} 
    </div> 
    <div class="col-sm-20"> 
    {{form.pallet_depth|as_crispy_field}} 
    </div> 
</div> 

<script type="text/javascript"> 
    $('#hidden2-1').css({ 
     'display': 'none' 
    }); 
    $('#hidden2-2').css({ 
     'display': 'none' 
    }); 
    $('#pack-method').on('change', function() { 
     if (this.value === 'Pallet') { 
      $('#hidden2-1').show(); 
      $('#hidden2-2').hide(); 
     } 
     else if ($(this).val() == 'Rack') { 
      $('#hidden2-1').hide(); 
      $('#hidden2-2').show(); 
     } 
     else if ($(this).val() == 'Box') { 
      $('#hidden2-1').hide(); 
      $('#hidden2-2').show(); 
     } 
     else { 
      $('#hidden2-1').hide(); 
      $('#hidden2-2').hide(); 
     } 
    }); 
</script> 

Forms.py 

BLANK_CHOICE = (('', '----------'),) 
PALLET = 'Pallet' 
RACK = 'Rack' 
BOX = 'Box' 

PACK_TYPE = (
    (PALLET, 'Pallet'), 
    (RACK, 'Rack'), 
    (BOX, 'Box'), 
) 

item_packmethod = forms.ChoiceField(label="Pack Method", choices = BLANK_CHOICE + PACK_TYPE,required=False) 

Answer 1

Я решил эту проблему. Для тех, кто может быть заинтересован, я изменил

$('#pack-method').on('change', function() { 
     if (this.value === 'Pallet') { 
      $('#hidden2-1').show(); 
      $('#hidden2-2').hide(); 
     } 
... 
} 

to 

$('select').on('change', function() { 
     var a = $(this).val(); 
     if (a === 'Pallet') { 
      $('#hidden2-1').show(); 
      $('#hidden2-2').hide(); 
     } 
... 
}