Jquery - Use HTML :selected to fetch an array with the same name

Question

I have this select input in my HTML

                <select class="" id="countries" name="Country">
                    <option value="AL">
                        Albania
                    </option>
                    <option value="HR">
                        Croatia
                    </option>
                    <option value="BG">
                        Bulgaria
                    </option>
                    <option value="MK">
                        Macedonia
                    </option>
                    <option value="MT">
                        Malta
                    </option>
                    <option value="MD">
                        Moldova
                    </option>
                    <option value="RO">
                        Romania
                    </option>
                    <option value="RS">
                        Serbia
                    </option>
                    <option value="SI">
                        Slovenia
                    </option>
                </select>

In Jquery I have arrays with same name as this select values. The arrays are filled with data which is irrelevant.

var Albania = [];
var Croatia = [];
var Bulgaria= [];
...

Depending on which country is selected, another select input should be filled with array with the same country name. This other select is #cepsp

$( "#countries").change(function() {
$('#cepsp').empty();
var option = '';
for (var tt=0;tt<Albania.length;tt++)
{option += '<option value="'+Albania[tt]+'">'+Albania[tt]+'</option>';}
$('#cepsp').append(option);
});

Notice how I used Albania array in Jquery and this is working fine. But I want this for other countries as well. I tried:

$( "#cepsp option:selected" ).text()[tt]

But of course that would never work.

How do I transfer text of selected input to variable name?

[try this](http://stackoverflow.com/questions/610336/javascript-retrieving-the-text-of-the-selected-option-in-select-element) — Iftikhar Ali Ansari, Mar 03 '15 at 13:55

score 3 · Answer 1 · edited May 23 '17 at 12:06

If you change the structure of your arrays into an object thus:

var countriesArra ={
   Albania:[],
   Croatia:[],
   Bulgaria:[],
   ....
}

You can now select the correct array based on it's name:

$( "#countries").change(function() {
  // get name that macthes array name, i.e. the text not the value
  var countryName = $(this).text();
 //countryName should be "Albania" not "AL"
  $('#cepsp').empty();
  var option = $('<option>');
   for (var tt=0;tt<countriesArra[countryName].length;tt++)
  {
     //variable prevents querying the array twice, so this should be more efficent
     var countryNameFromArra = countriesArra[countryName][tt];
     option.val(countryNameFromArra).html(countryNameFromArra);
   }
   $('#cepsp').append(option);
});

this works because you can access an object's properties by the string of the property name.

So countriesArra['Albania'] returns the "albania" array. You then iterate your tt variable as normal on this array, e.g. countriesArra['Albania'][0] returns the first item in the albania array of the object.

Brief fiddle

I've also tided up your option creation. So I create an "option" object using jquery var option = $('<option>');. I can then access it's methods and properties as a jquery object, rather than string concatenating it.

option.val(countriesArra[countryName][tt]).html(countriesArra[countryName][tt]);

score 2 · Accepted Answer · answered Mar 03 '15 at 14:10

Without modifying your array structure, you can try the eval instruction will can do some "variable name as a variable" behaviour for your purpose. To be more precise the eval function evaluate expression and/or instruction wich may contain variable, for example you can define two variable var a = 1 var b = 2 and run eval("a+b") wich will result 3.

JS

var Albania = ["ALBANIA", "ALBANIA2"];
var Croatia = ["CROATIA", "CROATIE2"];
var Bulgaria= ["BULGARIA", "BULGARIA2"];

$( "#countries").change(function() 
{
  $('#cepsp').empty();
  var option = '';
  var name = $("#countries option:selected").text();
  for (var tt=0;tt<eval(name).length;tt++)
  {
    option += '<option value="'+eval(name)[tt]+'">'+eval(name)[tt]+'</option>';
  }
  $('#cepsp').append(option);
});

score 1 · Answer 3 · answered Mar 03 '15 at 14:20

You can use eval to craft variable from string

var Albania = ["a","b","c"];
var Croatia = ["d","e","f"];
var Bulgaria= ["g","h","j"];


$( "#countries").change(function() {
    var countryName = $(this).find(":selected").text();
    $('#cepsp').empty();
    var country = eval(countryName);
    var option = '';
    for (var tt=0; tt < country.length; tt++)
    {option += '<option value="'+country[tt]+'">'+country[tt]+'</option>';}
    $('#cepsp').append(option);
});

http://jsfiddle.net/rerich/1ze1og8L/

Jquery - Use HTML :selected to fetch an array with the same name

3 Answers3