how to make city display based on province

[I-AM-OBODO]

hi guys.

pls i want city to display based on the province selected on my form. what i have currently is province display based on country selected.
i came across the script while searching though.

thanks

<form>
<div class="col-sm-9">
<select name="country" class="country form-control" data-error="Select a country" required>
<option value="Canada">Canada </option>
<option value="United States">United States </option>
</select>
</div>
</div>
<div class="form-group">
 <label class="col-sm-3 control-label">Province</label>
 <div class="col-sm-9">
<select name="pro" class="pro form-control">
<option value="Alberta">Alberta</option>
<option value="British Columbia">British Columbia</option>
<option value="Manitoba">Manitoba</option>
<option value="New Brunswick">New Brunswick</option>
<option value="Newfoundland and Labrador">Newfoundland and Labrador</option>
<option value="Nova Scotia">Nova Scotia</option>
<option value="Ontario">Ontario</option>
<option value="Prince Edward Island">Prince Edward Island</option>
<option value="Quebec">Quebec</option>
<option value="Saskatchewan">Saskatchewan</option>
<option value="Northwest Territories">Northwest Territories</option>
<option value="Nunavut">Nunavut</option>
<option value="Yukon">Yukon</option>
</select>
</div>
</div>
</form>

<script>
	$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();   
});
	$('.country').on('change', function (e) {
	    var optionSelected = $("option:selected", this);
    var valueSelected = this.value;
    if (valueSelected == "Canada") {
        $('.pro').html('<option value ="Alberta">Alberta</option><option value ="British Columbia">British Columbia</option><option value ="Manitoba">Manitoba</option><option value ="New Brunswick">New Brunswick</option><option value ="Newfoundland and Labrador">Newfoundland and Labrador</option><option value="Nova Scotia">Nova Scotia</option><option value="Ontario">Ontario</option><option value="Prince Edward Island">Prince Edward Island</option><option value="Quebec">Quebec</option><option value="Saskatchewan">Saskatchewan</option><option value="Northwest Territories">Northwest Territories</option><option value="Nunavut">Nunavut</option><option value="Yukon">Yukon</option>');
        // remove the city <select> dropdown
    } else if (valueSelected == "United States") {
        $('.pro ').html(
        '<option value ="Alabama">Alabama</option><option value="Alaska">Alaska</option><option value="Arizona">Arizona</option><option value="Arkansas">Arkansas</option><option value="California">California</option><option value="Colorado">Colorado</option><option value="Connecticut">Connecticut</option><option value="Delaware">Delaware</option><option value="District Of Columbia">District Of Columbia</option><option value="Florida">Florida</option><option value="Georgia">Georgia</option><option value="Hawaii">Hawaii</option><option value="Idaho">Idaho</option><option value="Illinois">Illinois</option><option value="Indiana">Indiana</option><option value="Iowa">Iowa</option><option value="Kansas">Kansas</option><option value="Kentucky">Kentucky</option><option value="Louisiana">Louisiana</option><option value="Maine">Maine</option><option value="Maryland">Maryland</option><option value="Massachusetts">Massachusetts</option><option value="Michigan">Michigan</option><option value="Minnesota">Minnesota</option><option value="Mississippi">Mississippi</option><option value="Missouri">Missouri</option><option value="Montana">Montana</option><option value="Nebraska">Nebraska</option><option value="Nevada">Nevada</option><option value="New Hampshire">New Hampshire</option><option value="New Jersey">New Jersey</option><option value="New Mexico">New Mexico</option><option value="New York">New York</option><option value="North Carolina">North Carolina</option><option value="North Dakota">North Dakota</option><option value="Ohio">Ohio</option><option value="Oklahoma">Oklahoma</option><option value="Oregon">Oregon</option><option value="Pennsylvania">Pennsylvania</option><option value="Rhode Island">Rhode Island</option><option value="South Carolina">South Carolina</option><option value="South Dakota">South Dakota</option><option value="Tennessee">Tennessee</option><option value="Texas">Texas</option><option value="Utah">Utah</option><option value="Vermont">Vermont</option><option value="Virginia">Virginia</option><option value="Washington">Washington</option><option value="West Virginia">West Virginia</option><option value="Wisconsin">Wisconsin</option><option value="Wyoming">Wyoming</option>');
    }
});
</script>	

Edited July 15, 2018 by Mr-Chidi

[requinix]

If you have province displaying according to country then it shouldn't be hard to do cities according to province.

But if it is hard then maybe you need to find a better way to do it it...

[I-AM-OBODO]

9 hours ago, requinix said:

If you have province displaying according to country then it shouldn't be hard to do cities according to province.

But if it is hard then maybe you need to find a better way to do it it...

??

[requinix]

!!

What?

[I-AM-OBODO]

On 7/16/2018 at 12:45 PM, requinix said:

!!

What?

It means i dont get it. I said i came across the javascript and reused. Know nothing about javascript. Just want a quick fix to get on with what am doing. Thanks for the link. I have bookmarked it. Will learn a thing or two from it but dont have the time to start learning now cos i have a pressing situation at hand. Thanks.

[requinix]

Do you have the city information ready? For all the provinces?

[I-AM-OBODO]

On 7/19/2018 at 8:42 AM, requinix said:

Do you have the city information ready? For all the provinces?

Hi.

Sorry for late response. I haven't been around for a while.
Can we please assume these as cities? If done with these i can try to get it done when all the cities are available.

Thanks

Boy
Girl
Man
Lorry
Car
Plane
Bus
Cat
Burry
Woman
Hussle
Restless
Tom
Jerry
Oakland
Canon

[requinix]

The literal list of cities isn't so much the problem as it is that you need a list of cities per province. Which you're already doing per country.

Given that you refuse to do AJAX, I would take it one step shorter than that: a serialized dump of all the provinces and their cities, embedded in the Javascript. It will be a lot of data but, like I said, you won't do AJAX.

So,

const countries = [
	{ "name": "Canada", "provinces": [
		{ "name": "Alberta", "cities": ["..."] },
		{ "name": "British Columbia", "cities": ["..."] },
		...
	]},
	{ "name": "United States", "provinces": [
		{ "name": "Alabama", "cities": ["..."] },
		{ "name": "Alaska", "cities": ["..."] },
		...
	]}
];

let's say that is your starting point. Forget cities for a minute - can you fix your Javascript to deal with provinces using this instead of that hardcoded HTML you have in there? Use a loop to find the right country according to the input, then clear the provinces list and use another loop on the provinces to add them to the list.

If you get stuck, post what you've come up with so far and a description of your problem.