Value of the Select

Question

I have a select with several car brands and I have a script that when selecting the car should appear its brands. I wanted to update the brands, but when I press the button to update only the last brand and the chosen model is updating.

HTML code

<select name='marca'  placeholder='marca' id='marca'onChange='onSelectChange()' '$row->marca' required/>
    <option value ='$row->marca'>$row->marca  - marca do seu veiculo </option></br>
    <option value='Alfa Romeo'>Alfa Romeo</option>
    <option value='Aston Martin'> Aston Martin</option>
    <option value='Audi'>Audi</option>
</select>

Template code

<select size='1' name='modelo' id='modelo0' style='display:none;'>
    <option selected value='modelo'>modelo</option>
    <option value='100'>100</option>
    <option value='80'>80</option>
    <option value='A1'>A1</option>
    <option value='A3'>A3</option>
    <option value='A4'>A4</option>
    <option value='A5'>A5</option>
    <option value='A6'>A6</option>
    <option value='A7'>A7</option>
    <option value='A8'>A8</option>
    <option value='Q2'>Q2</option>
    <option value='Q3'>Q3</option>
    <option value='Q5'>Q5</option>
    <option value='Q7'>Q7</option>
    <option value='R8'>R8</option>
    <option value='TT'>TT</option>
</select>

<select size='1' name='modelo' id='modelo1' style='display:none;'>
    <option selected value='modelo'>modelo</option>
    <option value='asdas'>aasas</option>
    <option value='dasdas'>asdasd</option>
</select>

<select size='1' name='modelo' id='modelo2' style='display:none;'>
    <option selected value='modelo'>modelo</option>
    <option value='dasdasdsa'>sadsadsad</option>
    <option value='asdcccascasas'>aaasdasdsas</option>
    <option value='dasadasdsdas'>dsadasd</option>
</select>

Javascript code

function onSelectChange() {
    var value = document.getElementById("marca").value;

    if ( (value == 'Audi')) {
        document.getElementById('modelo0').style.display = 'block';
    } else {
        document.getElementById('modelo0').style.display = 'none';
    } 

    if ( (value == 'Alfa Romeo')) {
        document.getElementById('modelo1').style.display = 'block';
    } else {
        document.getElementById('modelo1').style.display = 'none';
    } 

    if ( (value == 'Aston Martin')) {
        document.getElementById('modelo2').style.display = 'block';
    } else {
        document.getElementById('modelo2').style.display = 'none';
    } 
}

Answer 1

I changed the script a little bit, I believe that this way works the way you expect, instead of using the structure if else, I used the switch case, because it’s more efficient:

jQuery(function($){
   $('#marca').change(function(){
          var marca = $('#marca').val();    
          switch(marca){ 
		case '':
			$('#modelo0, #modelo1, #modelo2').hide();
			break;
		case 'Audi':
			$('#modelo0').show();
			$('#modelo1, #modelo2').hide();
			break;
		case 'Alfa Romeo':
			$('#modelo1').show();
			$('#modelo0, #modelo2').hide();
			break; 
		case 'Aston Martin':
			$('#modelo2').show();
			$('#modelo0, #modelo1').hide();
			break;
		default:
			$('#modelo0, #modelo1', '#modelo2').hide();
                        break;
        }
   });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name='marca'  placeholder='marca' id='marca' required/>
 <option value=''>Selecione a marca do seu veiculo </option></br>
 <option value='Alfa Romeo'>Alfa Romeo</option>
 <option value='Aston Martin'> Aston Martin</option>
 <option value='Audi'>Audi</option>
</select>

<select size='1' name='modelo' id='modelo0' style='display:none;'>
    <option selected value='modelo'>modelo</option>
    <option value='100'>100</option>
    <option value='80'>80</option>
    <option value='A1'>A1</option>
    <option value='A3'>A3</option>
    <option value='A4'>A4</option>
    <option value='A5'>A5</option>
    <option value='A6'>A6</option>
    <option value='A7'>A7</option>
    <option value='A8'>A8</option>
    <option value='Q2'>Q2</option>
    <option value='Q3'>Q3</option>
    <option value='Q5'>Q5</option>
    <option value='Q7'>Q7</option>
    <option value='R8'>R8</option>
    <option value='TT'>TT</option>
</select>

<select size='1' name='modelo' id='modelo1' style='display:none;'>
        <option selected value='modelo'>modelo</option>
        <option value='asdas'>aasas</option>
        <option value='dasdas'>asdasd</option>


</select>

<select size='1' name='modelo' id='modelo2' style='display:none;'>
        <option selected value='modelo'>modelo</option>
        <option value='dasdasdsa'>sadsadsad</option>
        <option value='asdcccascasas'>aaasdasdsas</option>
        <option value='dasadasdsdas'>dsadasd</option>
</select>