Как основать источник iframe на значении двух выпадающих списков?

#javascript #html

#javascript #HTML

Вопрос:

В настоящее время я визуализирую данные на основе covid-19 и представляю их на веб-сайте. Визуализации внедряются через iframe. В настоящее время на веб-сайте есть один выпадающий список, где пользователь может выбирать между визуализацией количества случаев или количества смертей. Вот как я это сделал:

 <select class="form-select form-control-lg input-sm" aria-label="Default select example" 

name="options" onchange="document.getElementById('youriframe').src = this.options[this.selectedIndex].value">
<option value="{% static 'europakartefaelle.html' %}">Europakarte Fälle</option>
<option value="{% static 'europakartetode.html' %}">Europakarte Tode </option>
</select>
</div>
<iframe id = "youriframe" src = "{% static 'europakartefaelle.html' %}" width="100%" height="700" allow="fullscreen" style="border:none;"></iframe>
 

Что я хочу сделать сейчас, так это предоставить пользователю другой выпадающий список, в котором он может изменить внешний вид визуализации. В настоящее время все визуализации выполняются с помощью choroplethmap, но я также хочу отобразить визуализацию с помощью пузырьковой карты. Я не совсем уверен, как мне это сделать, поэтому я очень признателен за любую помощь!