It’s better to send it as , an json object from server side , an render region option on city change , using the sent array ,
but if you still use html rendrerd select , you can hide option that doesn’t have same parent id , here I used jquery secipt to show result as follow :
NOTE: use data-parent instead of parent in HTML generation read more
html data attibute
Snippet :
$(function() {
// ref to city selector
var $selectCity = $("select[name='city']");
// ref to region selector
var $regionSelect = $("select[name='region']");
// get city startup value
var cityValue = $selectCity.val();
$regionSelect.val("");
// set selection on region select by hiding options
$regionSelect.find(`option[data-parent!=${cityValue}]`).hide();
//change listener to set region option based on city value
$selectCity.on("change", function(e) {
var value = e.target.value;
$regionSelect.val("");
$regionSelect.find(`option`).hide(); // hide all
$regionSelect.find(`option[data-parent=${value}]`).show();
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" style="width: 100%;" name="city">
<option value="1" id="vil_1">Qoraqalpog‘iston respublikasi</option>
<option value="2" id="vil_2">Andijon viloyati</option>
<option value="3" id="vil_3">Buxoro viloyati</option>
</select>
<br><br> The next one has regions list which belongs to cities.
<select class="form-control" style="width: 100%;" name="region">
<option value="15" id="reg_15" data-parent="1">Amudaryo tumani</option>
<option value="16" id="reg_16" data-parent="1">Beruniy tumani</option>
<option value="17" id="reg_17" data-parent="1">Qorauzoq tumani</option>
<option value="32" id="reg_32" data-parent="2">Andijon tumani</option>
<option value="33" id="reg_33" data-parent="2">Baliqchi tumani</option>
<option value="34" id="reg_34" data-parent="2">Bo`z tumani</option>
</select>