variable name in Javascript (in specific case)

Question

Select the country will decide cities list in second dropdown list.

https://jsfiddle.net/k18etgex/11/

It works with countries name which is one word such as "Úc", "Pháp", "Mỹ".

var Úc = [
 {display: "Canberra", value: "Canberra" }, 
 {display: "Sydney", value: "Sydney" }, 
 {display: "Melbourne", value: "Melbourne" },
 {display: "Perth", value: "Perth" },
 {display: "Gold Coast ", value: "Gold-Coast" }];
var Pháp = [
 {display: "Paris", value: "Paris" }, 
 {display: "Avignon", value: "Avignon" }, 
 {display: "Strasbourg", value: "Strasbourg" },
 {display: "Nice", value: "Nice" }];

But it does not work with country which name is two word such as "Nhật Bản"

var Nhật Bản = [
 {display: "Tokyo", value: "Tokyo" }, 
 {display: "Osaka", value: "Osaka" } 
 ];

AND I am not allowed to change anything of first dropdown box.

Country:
 <select name="departure_country[]" data-required="1" data-type="select">
 <option value="">- Chọn nước -</option>
 <option value="Mỹ">Mỹ</option> <option value="Úc">Úc</option> <option value="Pháp">Pháp</option>
 <option value="Nhật Bản">Nhật Bản</option>
 </select>

How to fix this problem?

• Tamil Selvan C: put underscore in between. var Nhật_Bản Read: A JavaScript identifier must start with a letter, underscore (_), or dollar sign ($); subsequent characters can also be digits (0-9). Because JavaScript is case sensitive, letters include the characters "A" through "Z" (uppercase) and the characters "a" through "z" (lowercase).
• Marcos Pérez Gude: Variable names shouldn't have got special chars, spaces or reserved words. Don't make that. Variable names can be what you want, doesn't need to retrieve from html, that's a bad practice and it return most common problems and fails.
• Marcos Pérez Gude: <option value="Nhật Bản"> is a value, not a variable name. Don't use that value to a variable name ....
• Marcos Pérez Gude: I don't know how to said to you that more clear.
• John: then I have to change <option value="Nhật Bản"> to <option value="Nhật_Bản">. it does not allowed.

Answer 1

Place the various arrays into a single object, accessed via [] notation.

var cities = {
 "Úc": [{
 display: "Canberra",
 value: "Canberra"
 }, {
 display: "Sydney",
 value: "Sydney"
 }, {
 display: "Melbourne",
 value: "Melbourne"
 }, {
 display: "Perth",
 value: "Perth"
 }, {
 display: "Gold Coast ",
 value: "Gold-Coast"
 }],
 "Pháp": [{
 display: "Paris",
 value: "Paris"
 }, {
 display: "Avignon",
 value: "Avignon"
 }, {
 display: "Strasbourg",
 value: "Strasbourg"
 }, {
 display: "Nice",
 value: "Nice"
 }],
 "Nhật Bản": [{
 display: "Tokyo",
 value: "Tokyo"
 }, {
 display: "Osaka",
 value: "Osaka"
 }]
};
(function($) {
 $('[name="departure_country[]"]').change(
 function() {
 var country = $(this).val();
 
 var clist = cities[country];
 
 var dep = $('[name="departure[]"]');
 
 dep.empty().append('<option>--select--</option>');
 
 $(clist).each(
 function(i, v) {
 $('<option>').text(v.display).val(v.value).appendTo(dep);
 }
 );
 }
 );
})(jQuery);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="departure_country[]" data-required="1" data-type="select">
 <option value="">- Chọn nước -</option>
 <option value="Mỹ">Mỹ</option>
 <option value="Úc">Úc</option>
 <option value="Pháp">Pháp</option>
 <option value="Nhật Bản">Nhật Bản</option>
</select>
<select name="departure[]" data-required="1" data-type="select">
 <option value="">- Chọn TP -</option>
 <option value="Hồ Chí Minh">Hồ Chí Minh</option>
</select>

Answer 2

You can define an object as

var countries = {
 "Nhật Bản" : [
 {display: "Tokyo", value: "Tokyo" }, 
 {display: "Osaka", value: "Osaka" } 
 ];
}

Then can access it using bracket notation

countries["Nhật Bản"]