Dynamic combobox

Question

I got these two selects:

<td>
        <strong><label for="Valência">Valência</label></strong>
        <select id="Valencia" name="Valencia" style="width:150px">
       <option></option>
        <?php        
         $sql = "SELECT descricaovalencia, Entidade  FROM centrodb.utentes GROUP BY descricaovalencia, Entidade"; 
                $qr = mysqli_query($conn, $sql); 
                while($ln = mysqli_fetch_assoc($qr)){ 
                    echo '<option value="'.$ln['descricaovalencia'].'"> '.$ln['descricaovalencia'].'</option>'; 
                    $valencia[$ln['descricaovalencia']]=array('Entidade'=>$ln['Entidade'],'Entidade'=>$ln['Entidade']); 
                } 
      ?>        
    </select>
        </td>

<td>
        <strong><label for="Entidade">Entidade</label></strong>
        <select id="Entidade" name="Entidade" style="width:150px">
       <option></option>
        <?php        
         foreach ($valencia as $key => $value) { 
                    echo '<option data-id="'.$key.'" value="'.$value['Entidade'].'">'.$value['Entidade'].'</option>'; 
                }
      ?>        
    </select>
        </td>

I have this script:

$('#Valencia').change(function(){ 
var id = $('#Valencia option:selected').val(); 
$.each($('#Entidade option'),function(){ 
if($(this).attr('data-id')==id){ 
$(this).attr('selected',true); 
} 
}); 
}); 

Result on first combobox:

But here what I want is for the name of the valences to appear only once and not repeated. Result of the second combobox:

Here on this combobox is not returning all users.

But the idea was to select a València in the first combobox and in this appear all the users that belong to this valence for me to select the intended.

Answer 1

With a $.Ajax() you do what you want

First <select></select>:

<td>
    <strong><label for="Valência">Valência</label></strong>
    <select id="Valencia" name="Valencia" style="width:150px">
        <option></option>
        <?php
            $sql = "SELECT descricaovalencia  FROM centrodb.utentes GROUP BY descricaovalencia"; 
            $qr = mysqli_query($conn, $sql);
            while($ln = mysqli_fetch_assoc($qr)){ 
                echo '<option value="'.$ln['descricaovalencia'].'"> '.$ln['descricaovalencia'].'</option>'; 
            }
        ?>
    </select>
</td>

According to <select></select>:

<td>
    <strong><label for="Entidade">Entidade</label></strong>
    <select id="Entidade" name="Entidade" style="width:150px">
        <option></option>
    </select>
</td>

Event change() with $.Ajax():

<script type="text/javascript">
    $('#Valencia').change(function(){ 
        var data = {"valencia":$('#Valencia option:selected').val()};
        $.ajax({
            type:"POST",
            url:"./produto_102",
            dataType:"Json",
            data:data,
            success:function(callback){
                $("#Entidade").html("");
                $.each(callback,function(key,value){
                    $("#Entidade").append(value);
                });
            }
        });
    });
</script>

PHP:

if((isset($_POST["valencia"]))&&!empty($_POST["valencia"])){
    $valencia = $_POST["valencia"];
    $sql="SELECT Entidade FROM centrodb.utentes WHERE descricaovalencia = '$valencia'";
    $qr = mysqli_query($conn, $sql);
    while($ln = mysqli_fetch_assoc($qr)){
        $entidade[]='<option value="'.$ln['Entidade'].'">'.$ln['Entidade'].'</option>';
    }
    echo json_encode($entidade);
}