PHP e JQUERY per scrivere codice html dinamicamente

[Brododipollo]

Ciao a tutti, vi espongo il mio problema. In una pagina php, ho creato una select con i valori presi da un database: questo è il codice

$query = "SELECT * FROM utenti ORDER BY Nome ASC";
$result = mysqli_query($db,$query);
        
echo '<select name="utenti1">';
while ($row = mysqli_fetch_array($result)) {
        echo '<option value="'.$row['Nome'].' '.$row['Cognome'].'">'.$row['Nome'].' '.$row['Cognome'].'</option>';
            
        }
echo '</select>';

Quello che vorrei fare, è avere un bottone accanto a questo campo select che, se premuto, crea un altro campo con all'interno scritto il valore dell'utente selezionato nella select. Il bottone potrà essere premuto 5 volte e creare 5 campi con i valori selezionati (visto che poi dovrò metterli in un database con 5 campi tramite metodo POST). Quindi anche i campi creati dal bottone, dovranno avere come attributo name="nomeutente1", name="nomeutente2" e così via.
Ho visto che qualcosa con JQUERY (di cui purtroppo non sono molto esperto) si può fare. Qualcuno ha qualche idea? La domanda che mi viene spontanea è: come faccio a far vedere i valori della select (che ho recuperato con query php) al mio programma jquery?

 

[NicolaSerafini]

Ciao, per poter recuperare i valore da un elemento del DOM devi utilizzare i selettori di JQ.
Ho fatto un semplice esempio per farti vedere il funzionamento, ovviamente devi avere abilitato jquery per poterlo testare:

<!-- Codice HTML-->
   <select>
        <option> Seleziona una opzione </option>
        <option value='test1'> Test 1 </option>
        <option value='test2'> Test 2 </option>
        <option value='test3'> Test 3 </option>
    </select>

// Codice JavaScript
<script>
$("select").change(function(){
    var test = $( "select option:selected" ).val();
        alert(test);
});
</script>

Se non ti è chiaro o hai problemi fammi sapere, comunque trovi il riferimento qui:
https://api.jquery.com/selected-selector/

 

[Brododipollo]

Ciao, innanzitutto ti ringrazio per la risposta. Ho provato a fare uno pseudocodice, ma essendo carente in javascript, penso non sia corretto. Questo è il mio codice html

//Recupero i valori dal db per la select (id=select1)
<?PHP
$query = "SELECT * FROM utenti ORDER BY Nome ASC";
$result = mysqli_query($db,$query);
    
echo '<select name="utenti1" id="select1">';
while ($row = mysqli_fetch_array($result)) {
        echo '<option value="'.$row['Nome'].' '.$row['Cognome'].'">'.$row['Nome'].' '.$row['Cognome'].'</option>';
        
        }
echo '</select>';
?>
//creo bottone da premere e un div dove creare i nuovi campi
<input type="button" onclick="addAutori()" >
<div id="mainDiv"></div>

Questo è il codice javascript che ho abbozzato

function addAutori(){
    var i= 0; //mi serve per dare un nome sempre diverso ai nuovi campi
    $("#select1").change(function(){
        var valore = $( "select option:selected" ).val();
        var testo = $( "select option:selected" ).text();
    })
    
    $("#mainDiv").append("<select name='utente'" + i +" readonly><option value='"+ valore +"'>"+      testo+ "</option> </select>"); //aggiungo il nuovo nodo al campo mainDiv con i valori selezionati    precedentemente
    i++;
};

Penso che la logica sia giusta, ma con la sintassi forse non ci sono proprio. Proverò a rivedermelo per bene. Se tu potessi indirizzarmi, te ne sarei davvero grato. Grazie 1000 per ora

Aggiornamento: ho modificato dichiarando tutte le variabili con "this.i, this.valore, this.testo". Adesso funziona e mi crea i nuovi campi select al posto giusto, ma hanno tutti come valore undefined, e il nome non progredisce di 1, rimane sempre a 0