Gestión de contenido dinámico

[Alexis88]

Cuando mencionas lo de "dinámico", supongo que te refieres a tener una lista de datos variables, la cual será alimentada manualmente o desde una base de datos. Supongamos que sea mediante una BD, entonces, lo que podrías hacer es recolectar todos los datos encontrados en la BD y devolver un array de objetos en donde cada uno contendrá a cada nombre de la tabla en la BD. Un ejemplo:

Código PHP:

/******************** personas.php ********************/
 
//Acá realizas tu conexión a la BD y luego viene el resto
$query = mysqli_query($conexion, 'SELECT nombre FROM personas') or exit ('¡Error!');
if (mysqli_num_rows($query)){
    $nombres = array();
    while ($row = mysqli_fetch_array($query)){
        $nombres[] = array('nombre' => $row['nombre']);
    }
    mysqli_free_result($query);
    echo json_encode($nombres);
}
 

El proceso es simple. Hago una búsqueda en la BD y, si obtengo resultados, creo un array al cual alimentaré con otros arrays en donde cada uno contendrá a cada nombre de tabla de la BD. Al final, retorno este conjunto en forma de objeto JSON. La idea es que este proceso se ejecute como respuesta a una petición asíncrona (Ajax) desde el archivo inicial (en donde está el combo) y ya con estos datos, alimentas al <select> con los resultados obtenidos:

Código Javascript:

var lista = document.getElementById("id_select"), //El combo de opciones
    ajax = function(){
        var xhr = new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP");
        xhr.open("GET", "personas.php", true);
        xhr.onreadystatechange = function(){
            if (xhr.readyState == 4 && xhr.status == 200){
                var nombres = JSON.parse(xhr.responseText),
                    total = nombres.length;
                for (var i = 0; i < total; i++){
                    var opcion = document.createElement("option");
                    opcion.value = nombres[i].nombre;
                    opcion.innerHTML = nombres[i].nombre;
                    lista.appendChild(opcion);
                }
            }
        };
        xhr.send(null);
    };
 

Creo al objeto XMLHttpRequest (para hacer la petición asíncrona), realizo la petición y recibo una respuesta a la cual decodifico para obtener un array al cual pueda recorrer y así tomar los valores que contiene para añadirlos al combo. Con lo anterior, ya tienes listo al combo y sus opciones traídas desde la BD. Ahora, nos haría falta un botón que, al pulsarlo, tomará al valor seleccionado en el combo y lo listará, además de un elemento en el cual se listarán los nombres seleccionados.

Código HTML:

Listado: <select id = "lista"></select>
<button onclick = "agregar()">Agregar</button>
Seleccionados: <p id = "seleccionados"></p>
 

Como verás, al pulsar el botón, se ejecutará la función agregar(), la cual tendrá una estructura como esta:

Código Javascript:

var agregar = function(){
    var seleccionados = document.getElementById("seleccionados");
    seleccionados.innerHTML += "<br />" + lista.value;
    lista.removeChild(lista[lista.selectedIndex]);
};
 

De esta forma, vamos mostrando los nombres seleccionados en el párrafo 'seleccionados' y, a la vez, retiramos el mismo nombre del combo. Todo junto quedaría así:

Código Javascript:

var lista = document.getElementById("lista"), //El combo de opciones 
    seleccionados = document.getElementById("seleccionados"), //El párrafo
    agregar = function(){
        seleccionados.innerHTML += "<br />" + lista.value;
        lista.removeChild(lista[lista.selectedIndex]);
    },
    ajax = function(){
        var xhr = new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP");
        xhr.open("GET", "personas.php", true);
        xhr.onreadystatechange = function(){
            if (xhr.readyState == 4 && xhr.status == 200){
                var nombres = JSON.parse(xhr.responseText),
                    total = nombres.length;
                for (var i = 0; i < total; i++){
                    var opcion = document.createElement("option");
                    opcion.value = nombres[i].nombre;
                    opcion.innerHTML = nombres[i].nombre;
                    lista.appendChild(opcion);
                }
            }
        };
        xhr.send(null);
    };
 

Saludos