List array according to what was selected

Question

I have a selectwith some cellular operators:

<select name="valor" id="operadoraRecarga" class="form-control operadoraRecarga">
<option value="claro">Claro</option>
<option value="tim">Tim</option>
<option value="oi">Oi</option>
<option value="vivo">Vivo</option>
<option value="nextel">Nextel</option>
</select>

And I have an array list with each carrier’s reload values

var claro_array  = new Array('10.00', '13.00', '15.00', '20.00', '30.00', '50.00', '100.00');
      var vivo_array   = new Array('5.00', '10.00', '15.00', '20.00', '25.00', '35.00', '100.00');
      var oi_array     = new Array('10.00', '14.00', '18.00', '20.00', '25.00', '30.00', '35.00', '40.00', '50.00', '75.00', '100.00');
      var tim_array    = new Array('7.00', '15.00', '20.00', '30.00', '35.00', '50.00', '100.00');
      var nextel_array = new Array('20.00', '30.00', '50.00', '100.00');

I have the code below where according to what was selected on select it already selects the right array to mount the other selectof values, but the problem is that instead of him doing this he is taking each letter of the word (ex: tim_array) and mounting the select, getting each type option like this:

Option 1: t
Option 2: i
Option 3: m

My Code

jQuery(document).ready(function($){
      var claro_array  = new Array('10.00', '13.00', '15.00', '20.00', '30.00', '50.00', '100.00');
      var vivo_array   = new Array('5.00', '10.00', '15.00', '20.00', '25.00', '35.00', '100.00');
      var oi_array     = new Array('10.00', '14.00', '18.00', '20.00', '25.00', '30.00', '35.00', '40.00', '50.00', '75.00', '100.00');
      var tim_array    = new Array('7.00', '15.00', '20.00', '30.00', '35.00', '50.00', '100.00');
      var nextel_array = new Array('20.00', '30.00', '50.00', '100.00');

      $("#operadoraRecarga").change(function(){

        var selecionado = $("#operadoraRecarga option:selected").val();
        var nome_array = selecionado+'_array';
        var html = '';

        $("#valorRecarga").find('option').remove();

        for(i = 0; i <= nome_array.length; i++){

          html += '<option value="'+nome_array[i]+'">'+nome_array[i]+'</option>';

          }

        $("#valorRecarga").append(html);
      })
    });

Answer 1

It is not possible to fetch the value of a variable by creating a string with its name...

That is to say:

var exemplo = 10;
alert('exe' + 'mplo');

will not give 10, but rather a string, with the letters "example".

But you can use that logic if you create an object and access its properties in the way we refer to above, with brackets. In that case it would be the example so:

var obj = {exemplo: 10};
alert(obj['exe' + 'mplo']);

and then it would be 10!

In the code you should have it so:

jQuery(document).ready(function($) {
    var precos = {
        claro: ["10.00", "13.00", "15.00", "20.00", "30.00", "50.00", "100.00"],
        vivo: ["5.00", "10.00", "15.00", "20.00", "25.00", "35.00", "100.00"],
        oi: ["10.00", "14.00", "18.00", "20.00", "25.00", "30.00", "35.00", "40.00", "50.00", "75.00", "100.00"],
        tim: ["7.00", "15.00", "20.00", "30.00", "35.00", "50.00", "100.00"],
        nextel: ["20.00", "30.00", "50.00", "100.00"]
    }

    $("#operadoraRecarga").change(function() {
        var selecionado = this.value;
        var html = precos[selecionado].reduce(function(str, preco) {
            return str + '<option value="' + preco + '">' + preco + '</option>';
        }, '');
        $("#valorRecarga").html(html);
    })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="valor" id="operadoraRecarga" class="form-control operadoraRecarga">
    <option value="claro">Claro</option>
    <option value="tim">Tim</option>
    <option value="oi">Oi</option>
    <option value="vivo">Vivo</option>
    <option value="nextel">Nextel</option>
</select>
<select id="valorRecarga"></select>

jsFiddle: https://jsfiddle.net/Lmg4fyqq/

Answer 2

Basically there are some problems in the code

for(i = 0; i <= nome_array.length; i++){

This will cause the loop to run +1 time than expected because (assuming nome_array.length were 10: 10 <= 10 --> true, 0 <= 10; --> the loop would run 11 times. And you are leaving the i global, which may cause some problems in the future.

According to,

var nome_array = selecionado+'_array';

, this results in a String, for example (depending on selecionado):

"claro_array"

Because of this the loop only read the characters of this string, since each character can be identified with the keys [..], String().charAt and String().charCodeAt.

One great thing you can do is put all these arrays claro_array, tim_array, etc, on an object, then index it with selecionado.

var arrays  = {
    claro: ['10.00', '13.00', '15.00', '20.00', '30.00', '50.00', '100.00'],
    vivo: ['5.00', '10.00', '15.00', '20.00', '25.00', '35.00', '100.00'],
    oi: ['10.00', '14.00', '18.00', '20.00', '25.00', '30.00', '35.00', '40.00', '50.00', '75.00', '100.00'],
    tim: ['7.00', '15.00', '20.00', '30.00', '35.00', '50.00', '100.00'],
    nextel: ['20.00', '30.00', '50.00', '100.00']
};

var nome_array = arrays[selecionado];

/**
 * Fashion com o for... of
 */
for (var item of nome_array)
    html += '<option value="' + item + '">' + item + '</option>';

Answer 3

var claro_array  = new Array('10.00', '13.00', '15.00', '20.00', '30.00', '50.00', '100.00');
$('#select').empty();
$.each(options, function(i, p) {
    $('#select').append($('<option></option>').val(p).html(p));
});

Where '#select' is the element you want to display the array!