我如何用javascript和php缩短这个过程

Question

I am making a switch cars and their respective models. The data is brought from a database with php. may make more dynamic of like this? (shorter code). Sorry for my bad english.

Selector

<select id="main_list">
    <option value="default" selected>Marca</option>
    <?php

        /* marcas */
        $Alfa_Romeo=39;
        $Chevrolet=33;
        $Chrysler=40;
        $Citroën=42;
        $Dodge=41;
        $Fiat=35;
        /* ... */

        $Registros=array();    
        $Registros=TraerMarcas();

        if (!empty($Registros)) {   
            $cntRegistros=count($Registros);
        }
    ?>

    <?php for ($i=0; $i < $cntRegistros ; $i++) { ?>
        <option value="<?php echo $Registros[$i]['marca'] ?>"><?php echo $Registros[$i]['marca'] ?></option>
    <?php } ?>    
</select>

<select id="brand" disabled > <option value="default" selected>Modelo</option></select>
<select id="version" disabled ><option value="default" selected>Cilindrada</option></select>

JS

$( document ).ready(function() {

    $(function() {

        var sel, i,
            list =  [ <?php for ($i=0; $i < $cntRegistros ; $i++) { echo "'".$Registros[$i]['marca']."',"; } ?> ],
            Fiat =  [ <?php 

                    $Modelo=array();
                    $marca=$Fiat;

                    $Modelo=TraerModelo($marca);

                    if (!empty($Modelo)) {   
                    $cntModelo=count($Modelo);
                    }

                    for ($i=0; $i < $cntModelo ; $i++) { echo "'".$Modelo[$i]['modelo']."',"; }

                    ?> ],

        Chevrolet = [ <?php 

                    $Modelo=array();
                    $marca=$Chevrolet;

                    $Modelo=TraerModelo($marca);

                    if (!empty($Modelo)) {   
                    $cntModelo=count($Modelo);
                    }

                    for ($i=0; $i < $cntModelo ; $i++) { echo "'".$Modelo[$i]['modelo']."',"; }

                    ?> ],

        Ford =      [ <?php 

                    $Modelo=array();
                    $marca=$Ford;

                    $Modelo=TraerModelo($marca);

                    if (!empty($Modelo)) {   
                    $cntModelo=count($Modelo);
                    }

                    for ($i=0; $i < $cntModelo ; $i++) { echo "'".$Modelo[$i]['modelo']."',"; }

                    ?> ],

        Cilindrada = [ '1.2','1.3','1.6','2.0','2.5', ],

        dev_default = '<option value="default" selected>Modelo</option>',
        os_default  = '<option value="default" selected>Cilindrada</option>';

        sel_marca = $('#brand');
        sel_cilin = $('#version');

        $('select').change(function() {
            switch (this.id) {

                case 'main_list':

                    $('.secondary').hide();

                    sel_marca.find('option').remove();
                    sel_marca.append(dev_default);
                    sel_marca.show();

                    $('#brand').removeAttr('disabled');

                        if (this.value == 'Fiat') {
                            for (i = 0; i < Fiat.length; i++) {
                                $("#brand").append(
                                    '<option value="' + Fiat[i] + '">' + Fiat[i] + '</option>'
                                );
                            }
                        } else if (this.value == 'Chevrolet') {
                            for (i = 0; i < Chevrolet.length; i++) {
                                $("#brand").append(
                                    '<option value="' + Chevrolet[i] + '">' + Chevrolet[i] + '</option>'
                                );
                            }
                        } else if (this.value == 'Ford') {
                            for (i = 0; i < Ford.length; i++) {
                                $("#brand").append(
                                    '<option value="' + Ford[i] + '">' + Ford[i] + '</option>'
                            );
                        }
            }

                break;

                case 'brand':

                sel_cilin.find('option').remove();
                sel_cilin.append(os_default);
                sel_cilin.show();

                $('#version').removeAttr('disabled');  

                for (i = 0; i < Cilindrada.length; i++) {
                    $("#version").append(
                        '<option value="' + Cilindrada[i] + '">' + Cilindrada[i] + '</option>'
                    );
                }; 

                break;

            }

        });

    });
})

Note that I have to repeat the process with 18 car brands. I imagined creating a variable selected according to this brand in the 1st selector. Something like:

var sel, i,
    list =  [ <?php for ($i=0; $i < $cntRegistros ; $i++) { echo "'".$Registros[$i]['marca']."',"; } ?> ],
    CarBrand /* this variable changes according to the variable list */ =  [ <?php 

            $Modelo=array();
            $marca=$CarBrand; /* Here the dynamic variable is repeated, calling the database auto brand and bringing selected models that mark */

            $Modelo=TraerModelo($marca);

            if (!empty($Modelo)) {   
            $cntModelo=count($Modelo);
            }

            for ($i=0; $i < $cntModelo ; $i++) { echo "'".$Modelo[$i]['modelo']."',"; }

            ?> ],

Here is the jsFiddle where I relied to create this.

I hope it's not too crazy what I think, and hope they can come to understand my question. Thanks for reading.

Answer 1

I got this and it works :)

For brand cars:

var sel, i,
    list =  [ <?php for ($i=0; $i < $cntRegistros ; $i++) { echo "'".$Registros[$i]['marca']."',"; } ?> ],

    /**/

    <?php for ($i=0; $i < $cntRegistros ; $i++) { echo $Registros[$i]['marca']; ?> = [ 

        <?php 

            $Modelo=array();
            $marca=$$Registros[$i]['marca'];

            $Modelo=TraerModelo($marca);

            if (!empty($Modelo)) {   
                $cntModelo=count($Modelo);
            };

            for ($k=0; $k < $cntModelo ; $k++) { echo "'".$Modelo[$k]['modelo']."',"; } 
        ?> ],

    <?php }; ?>

The second selector:

('#brand').removeAttr('disabled');

    if (this.value == 'Alfa_Romeo') {
        for (i = 0; i < Alfa_Romeo.length; i++) {
            $("#brand").append(
                '<option value="' + Alfa_Romeo[i] + '">' + Alfa_Romeo[i] + '</option>'
            );
        }

    <?php for ($k = 0; $k < $cntRegistros; $k++) { ?>

    } else if (this.value == <?php echo "'".$Registros[$k]['marca']."'" ?> ) {

        for (i = 0; i < <?php echo $Registros[$k]['marca'] ?>.length; i++) {
            $("#brand").append(
                '<option value="' + <?php echo $Registros[$k]['marca'] ?>[i] + '">' + <?php echo $Registros[$k]['marca'] ?>[i] + '</option>'
            );
        }

    <?php } ?>