variable name in Javascript (in specific case)

Question

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

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?

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). — Tamil Selvan C
– Tamil Selvan C, Commented Jan 12, 2016 at 16:48
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
– Marcos Pérez Gude, Commented Jan 12, 2016 at 16:49
<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
– Marcos Pérez Gude, Commented Jan 12, 2016 at 16:50
then I have to change <option value="Nhật Bản"> to <option value="Nhật_Bản">. it does not allowed. — John
– John, Commented Jan 12, 2016 at 16:51

Paul Roub · Accepted Answer · 2016-01-12 16:57:00Z

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>

Satpal · Accepted Answer · 2016-01-12 16:51:01Z

1

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"]

answered Jan 12, 2016 at 16:51

Satpal

134k13 gold badges168 silver badges171 bronze badges

Collectives™ on Stack Overflow

variable name in Javascript (in specific case)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related