List array according to what was selected

Navigation
1

I have select with some mobile 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 operator'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 in select it already selects the right array to mount the other select of values, but the problem is that instead of doing so it is catching each letter of the word (ex: tim_array) and mounting the select, getting each option type 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);
      })
    });
    
asked by anonymous 29.08.2016 / 21:05

3 answers

1

Can not fetch the value of a variable by creating a string with its name ...

That is: 

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

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

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

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

And then I would already give 10 !

In the code you should then look like this: 

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><selectname="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: link

    
29.08.2016 / 21:38
0

Basically there are some problems in the code 

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

This will cause the loop to run +1 times than expected, since (assuming that nome_array.length was 10 : 10 <= 10 -> true , 0 <= 10; -> the loop it would run 11 times, and you're leaving i global, which may cause some problems in the future.

Second, 

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 to put all of these arrays claro_array , tim_array , etc into 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>';
    
29.08.2016 / 21:32
-2
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!

    
29.08.2016 / 21:17
How to avoid repetition? Retrieve last inserted ID DataSnap / SqlServer [duplicate]