dynamically update select option on keyup in jquery

Question

FIDDLE LNK for my 3 select option. What i want to do is when on document.ready the Continent will be populated and then the country of the active continent will be load on the country and then the city will be loaded depending on the country.

Also i have input text when the user type into the textbox that will be the value that will appear on the select as a selected option.

Answer 1

In your submit button click code, you have to append new option to the drop down instead of updating the value. So instead of this:

$('#continentselect').val(continent);
$('#countryselect').val(country);
$('#cityselect').val(city);

Try this:

$('#continentselect').append('<option>' + continent + '</option>');
$('#countryselect').append('<option>' + country + '</option>');
$('#cityselect').val('<option>' + city + '</option>');

Also you need to update your js arrays i.e. country, continent and city with the newly entered values from the text-boxes.