Dropdown Relating Another in Loop

Question

This script does this: when we click on the first dropdown it opens a second dropdown.

Okay, so far it works perfectly. But my problem is that when I put it inside a loop it stops working.

So each line wanted me to repeat this script. As I have no knowledge of javascript wanted a little help to solve this

select.php

<script type="text/javascript"   
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>

 <script type="text/javascript">
 $(document).ready(function() {
 $('#loader').hide();
 $('#show_heading').hide();
 $('#search_category_id').change(function(){
    $('#show_sub_categories').fadeOut();
    $('#loader').show();
    $.post("select2.php", {
        parent_id: $('#search_category_id').val(),
    }, function(response){
        setTimeout("finishAjax('show_sub_categories',   
 '"+escape(response)+"')", 400);
    });
    return false;

    });

    });
    function finishAjax(id, response){
    $('#loader').hide();
    $('#show_heading').show();
    $('#'+id).html(unescape(response));
    $('#'+id).fadeIn();
    } 
    function alert_id()
    {
    if($('#sub_category_id').val() == '')
    alert('Please select a sub category.');
    else
    alert($('#sub_category_id').val());
    return false;
    }
    </script>



<select name="id_dentista" style="text-transform: uppercase;"  class="form-control" id="search_category_id"  >

<option value="1">um</option>
<option value="2">dois</option>
<option value="28">Vinte e Oito</option>

    </div>

<label>Motorista:</label>
<div id="show_sub_categories" align="center" ></div>

Select2.php

     <?php


if($_REQUEST){

$id_dentista     = $_REQUEST['id_dentista'];


echo "
<select name='id_motorista' id='sub_category_id'>"; 
 if($id_dentista == "28"){ // se marcele 

 echo"  
 <option value='or'>Ortodontia</option>
  <option value='cg2'>Clínico</option>
  <option value='pr'>Prótese</option>
  <option value='ed'>Endodontia</option>    
 ";
 }else{
 echo "
  '<option value='or'>Ortodontia</option>
  '<option value='cg'>Clínico</option>
 ";
 } 

 echo "</select>";
 }

Answer 1

The loop will only work if you have index before the data as follows an array example.

var dados = [

     0 => [
      'nome' => 'teste',
      'sobrenome' => 'teste1'
     ],
     1 => [
       'nome' => 'teste2',
       'sobrenome' => 'teste3'
     ] 
    ];

This way you can do a for in javascript using jquery as it shows your code is as follows.

$(document).ready(function(){
    for(i = 0; dados.length; i++){
        console.log(dados[i]); // estou puxando dados do primeiro exemplo e passando os 2 indexs para um loop que faz a contagem no Length e soma até o fim da listagem.
    }
});

Note: The Index I say is the 0 and 1 if you do console.log(dados.length); you will see that it will return 2, that way it is possible to loop in javascript, if it is in JSON same thing, takes the JSON in variable and passes in LENGTH to count of Dexes and makes the listing in for.