Question

Hi guys i have a combobox with jquery – but i cant make the second one populated when the first select coming selected alredy. im try to get the value without change the select.

<form>
    <select name="tipo" id="Tipo_Id" class="buscaTiposVeiculos">
        <option value="1" selected="selected">teste1</option>
        <option value="2">teste2</option>
        <option value="3">teste3</option>
        <option value="4">teste4</option>
    </select>
    <select name="marca" class="recebeMarcas">
        <option value="">--- Select ---</option>
    </select>
</form>

jquery

$('select.buscaTiposVeiculos').change(function () {
     $("select.recebeMarcas").html('<option value="">Carregando...</option>');

     // var opt = $("select.buscaTiposVeiculos"); tried like this
     // var val = $(this).val(); tried like this
     // var val = $(this).find('option:selected').val(); not works
     $('select.recebeMarcas >option').remove();
     $.post('/inc/geraCidades.php', {
         tipov: $(this).val(),
         tipo: "tipo"
     }, function (data) {

         $('select.recebeMarcas').html('<option value="">Selecione a Marca</option>' + data);
     });
 });

Answer 1

To trigger change event on page load and populate second select automatically. Some commented code can be removed

/* create the change handler  use ID is better selector for efficiancy*/
$('#Tipo_Id').change(function() {                                              
     /* this populates second select with one option*/
    $("select.recebeMarcas").html('<option value="">Carregando...</option>');                                          

   /* this removes option populated in line above*/
    $('select.recebeMarcas >option').remove();


    $.post('/inc/geraCidades.php', {tipov: $(this).val(), tipo : "tipo"}, function(data) {

        $('select.recebeMarcas').html('<option value="">Selecione a Marca</option>'+data);
    });

    /* trigger the change event on page load*/
}).change();