Bootstrap 5 · Intermediate

Dependent Select Boxes

A country select that populates a dependent city select via JS.

Requires Bootstrap 5. Add the CDN tags below to your page (styles in <head>, scripts before </body>). The downloaded file already includes them.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<div class="card border-0 shadow-sm" style="max-width:340px"><div class="card-body">
  <label class="form-label small fw-semibold">Country</label>
  <select class="form-select mb-2" id="dsCountry"><option value="">Choose…</option><option>Latvia</option><option>Germany</option></select>
  <label class="form-label small fw-semibold">City</label>
  <select class="form-select" id="dsCity" disabled><option>Select country first</option></select>
</div></div>

var data={Latvia:['Riga','Liepaja','Daugavpils'],Germany:['Berlin','Munich','Hamburg']};
var c=document.getElementById('dsCountry'),city=document.getElementById('dsCity');
c.addEventListener('change',function(){var list=data[c.value];if(list){city.disabled=false;city.innerHTML=list.map(function(x){return '<option>'+x+'</option>'}).join('')}else{city.disabled=true;city.innerHTML='<option>Select country first</option>'}});

Free to use.This component uses Bootstrap 5 (linked above). Copy any file, or download a ready-to-open .html page with the CDN links already included.