как изменить параметры одного <select>, который зависит от другого списка выбора

У меня есть два тега select

<select name="select1" id="select1">


<option value="1">Punjab</option>


<option value="3">Sindh</option>


<option value="4">KPK</option>


<option value="5">Balochistan</option>


</select>

И второе

<select id="select2" name="select2">

<option value="Jhelum">Jhelum</option>


<option value="Karachi">Karachi</option>


<option value="Rawalpindi">Rawalpindi</option>


<option value="Islamabad">Islamabad</option>


<option value="Larkana">Larkana</option>


<option value="Hyderabad">Hyderabad</option>
</select>

Эти значения в обоих списках поступают из базы данных. Я пытаюсь динамически изменять параметры в списке выбора 2. например, если пользователь выбирает вариант Punjab в первом списке опций, тогда параметры во втором списке параметров должны быть динамически изменены на Jhelum, Исламабад, Равалпинди и другие варианты должны скрывать во втором списке опций. Аналогично, если пользователь выбирает Sindh в первом списке опций, тогда параметры во втором списке параметров должны быть изменены на Карачи, Хайдарабад и т.д. Я не уверен, как это будет работать