[SOLUCIONADO] Select, option, varios campos

[Mental]

Tengo un select que recoge los valores de una consulta a una tabla clientes.
El select recoge el value y el texto.
Value identifica, en la tabla cliente el Id del Cliente.
El texto recoge apellido del cliente.
Hay un campo en la tabla que contiene el mail del cliente.
Pregunta:
Se puede incluir en el option del Select otros campos que estén disponibles para posteriores acciones, pero que no sean visibles en el Select.
Concretamente quiero disponer de la dirección de correo electrónico del cliente, para poder incluir en la funcion maito.

Este es el código actual.

Código Javascript:

<select id="3" class="tx"  
<?php if($var_atributos ==0){echo "disabled";} else{echo "enabled";}?> name="txtape" value="">
<option value= "<?php echo $var3id ?>"><?php echo $var3 ?></option>
<?php
while ($fila=mysqli_fetch_row($resultape))                                  
    {
    echo "<option value  ='".$fila['0']."'>".$fila['1']."</option>";
    echo "<$var3id value ='".$fila['0']."' ";
    }
?>
</select>
 

Podría incluir mas elementos del array $fila[], pero serían visibles y no quiero que se vean.

Código PHP:

echo "<option value  ='".$fila['0']."'>".$fila['1'].$fila['2'] "</option>";
 

[Alexis88]

Se me ocurre que asignes a cada opción un atributo personalizado con el respectivo correo electrónico y al final del <select>, añade un campo oculto en el cual cargaremos el correo electrónica de la opción seleccionada, luego, cuando se produzca el evento change en el <select>, ejecutarás una función en la que tomarás el correo electrónico guardado en el atributo personalizado de la opción seleccionada y lo asignarás al campo oculto.

Un ejemplo:

Código HTML:

<select onchange = "asignar(this.options[this.selectedIndex].dataset.email)">
    <option value = "opc1" data-email = "[email protected]">Primera opción</option>
    <option value = "opc2" data-email = "[email protected]">Segunda opción</option>
    <option value = "opc3" data-email = "[email protected]">Tercera opción</option>
</select>
 
<input type = "hidden" id = "oculto" />
 

Código Javascript:

function asignar(email){
    document.querySelector("#oculto").value = email;
}
 

Esto es lo que envío como parámetro a la función:

• this: Hace referencia al <select>.
• options: Representa al conjunto de opciones del <select>.
• selectedIndex: Es el índice de la opción seleccionada dentro del conjunto de opciones. El primero es 0.
• dataset: Atributo con el cual puedo obtener el valor de un atributo personalizado. Más información.
• email: El nombre del atributo personalizado

Saludos

[Mental]

Hola Alexis:
Gracias por tu respuesta.
Mis conocimientos de programación vienen de VBA.
Ahí tenemos la opción de incluir en un campo una consulta de selección de incluye varios campos. Y en el select sólo es visible el valor del campo que queremos, estando el resto disponibles para extraer de ellos los valores que queremos ya que actua como un array.
En html por lo que veo el select sólo contempla dos valores value y texto.
Con el desarrollo que me has proporcionado supongo que debo incluir en la tabla un campo que será posteriormente el id="oculto" y que recogerá el valor del email
La pregunta viene por saber si en html el select permite también esta opción pero no he encontrado nada referido a ello.

[Alexis88]

¿Te refieres a si puedes o no añadir atributos personalizados?

Pues, sí. Es una de las novedades del estándar HTML5 y puedes añadirlos a cualquier elemento HTML. Incluso puede ser más de uno.

Saludos

[Mental]

Estoy haciendo una prueba para obtener el valor que le asigno al atributo.
La respuesta que obtengo con el alert es undefined.
El código es:

La función que debe indicarme el valor del atributo:

Código Javascript:

function prueba()
        {
            var mail = document.getElementById('3').dataset.email;
            alert(mail);
        }
 

El codigo del select donde he insertado data-email

Código HTML:

<select id="3" class="tx"  
                         <?php if($var_atributos ==0){echo "disabled";} else{echo "enabled";}?> name="txtape" value="" onclick="prueba()">
                            <option value= "<?php echo $var3id ?>" data-email ="mimail"><?php echo $var3 ?></option>
                            <?php
                                while ($fila=mysqli_fetch_row($resultape))                                  
                                {
                                    echo "<option value  ='".$fila['0']."'>".$fila['1']."</option>";
                                    echo "<$var3id value ='".$fila['0']."' ";
                                }
                            ?>
                        </select>
 

Como he comentado alert responde undefined

[PHPeros]

Estás obteniendo el select y no el option.

[Alexis88]

¿Por qué no envías el parámetro a la función como te lo indiqué? Además, no estás creando el atributo personalizado para las opciones que se generan en el bucle. Corrige eso.

Saludos

[Mental]

Hola:
Gracias a ambos.
PHPeros:

Estás obteniendo el select y no el option.

Sí. En efecto. Lo que pretendo posteriormente es que cuando envíe un mail, el dato que debe capturar es el que hay en ese momento en el SELECT y no en la opción.
Aunque naturalmente el option posteriormente incorporará el dato de la consulta como un elemento más del array.

Alexis88:
Con el ejemplo que he pasado estaba intentando trasladar a una prueba básica la lectura del atributo para verlo en un alert.
He probado con alert(elemento.dataset.mail) y daba undefined.
He intentado comprender el concepto buscando por internet y aplicando en lugar de dataset getAttribute. Así lo único que he conseguido es que el valor devuelto sea 'null'.
Finalmente he trasladado el código que me has pasado a un script y realizado la prueba y en el campo que debería recoger el valor del atributo obtengo "undefined".

PD: Tardo en responder por la disponibilidad que tengo de trabajo. Disculpad y gracias de nuevo,

[Mental]

Disculpas Alexis88:
Tú codigo funciona bien en el script.
Me había dejado atrás una letra al referenciar el atributo.
Sigo implementando tu codigo para obtener el resultado esperado.
Respondo más tarde con el resultado.
Gracias de nuevo.

[Mental]

Hola:
Os dejo el código una vez desarrollado el atributo personalizado.

Código PHP:

<select id="3" class="tx"  
<?php if($var_atributos ==0){echo "disabled";} else{echo "enabled";}?> name="txtape" value="">
<option value= "<?php echo $var3id ?>" data-email ="<?php echo $var3mail ?>"><?php echo $var3 ?></option>
<?php
while ($fila=mysqli_fetch_row($resultape))                                  
  {
  echo "<option value  ='".$fila['0']."'data-email = '".$fila['2']."'>".$fila['1']."</option>";
  echo "<$var3id value ='".$fila['0']."' ";
   }
  ?>
</select>
 

Alexis88 y PHPeros. A ambos mi agradecimiento.
Un saludo.

[jcjregistros]

hola , algo tarde pero intentaré explicarme rapido.
Será mas fácil si crear un arreglo donde almacenes los campos extras que quieras, en este caso el correo, etc. y que tu posición sea el valor de cada option en el select, asi seria fácil recuperarlo ( función recuperarCorreo), mira algo asi:

Código PHP:

 <select id="3" class="tx"  
<?php if($var_atributos ==0){echo "disabled";} else{echo "enabled";}?> name="txtape" value="">
<option value= "<?php echo $var3id ?>"><?php echo $var3 ?></option>
<?php
echo "<script>var tablaClientes=[];</script>";
while ($fila=mysqli_fetch_row($resultape))                                  
    {
        //$fila['0']=idClinte , $fila['2']=mail
        //Guardas los correos en una variable de java script en un arreglo donde la posicion sea el idCliente
    echo "<script> tablaClientes[".$fila['0']."]='".$fila['2'] ."';</script>";
    echo "<option value  ='".$fila['0']."'>".$fila['1']."</option>";
    echo "<$var3id value ='".$fila['0']."' ";
    }
?>
</select>
<script>
    function recuperarCorreo(ClienteID){
        return tablaClientes[ClienteID];
        }
</script>  

[Alexis88]

Aunque funcione, no recomiendo mezclar PHP con JavaScript, el código queda muy sucio y desordenado. Si se desea interactuar con ambos lenguajes, se puede echar mano de Ajax.

No existe el atributo enabled. Para habilitar un elemento inhabilitado, se le asigna el valor booleano false al atributo disabled.

Creo que en lugar de ser una forma "más fácil", termina siendo todo lo contrario.

Saludos