２つのボタンの内容を結合したい

２つのボタンの内容を結合したいです。
今、１つの大項目（２種類の選択肢を持つ）と２つの小項目のドリルダウンボタンを用意しました。
http://php.o0o0.jp/article/jquery-drilldown　の下にあるドリルダウンボタンみたいに大項目を選択したら小項目の内容がそれに付随して変わり選択できるようにしたいです。
今views.pyに

from collections import OrderedDict
from django.shortcuts import render
import json
from django.http import JsonResponse

def index(request):
    with open('./data/data.json', 'r') as f:
        json_data = json.loads(f.read(), object_pairs_hook=OrderedDict)

        preprocessed = []
        counter = 0
        for key in ["type1", "type2", "type3", "type4"]:
            values = [(i + counter, value) for i, value in enumerate(json_data[key].values())]
            preprocessed.append((key, values))
            counter = len(json_data[key])
    return render(request, 'index.html', {'json_data': json_data,'preprocessed': preprocessed})

と書き、index.htmlに

<select id="mainDD" data-placeholder="Choose" class="chzn-select" style="width:600px;">
    {% for i in json_data.items.values %}
            <option>{{ i }}</option>
    {% endfor %}
    </select>


    {% for key, values in preprocessed %}
    <select name="type" id=key>
    {% for counter, value in values %}
        <option value="{{ counter }}">{{ value }}</option>
    {% endfor %}
    </select>
    {% endfor %}

と書きました。
ブラウザでは３つのボタン（大項目のボタン・小項目のボタン①・小項目のボタン②）が表示されていて、リンクのドリルダウンのボタンのように、大項目のボタンと小項目のボタンの内容や動きを結合させたいです。
どう直せば良いのでしょうか？