5

hola tengo un problema como puedo poner dos value en un select option y luego elegir que el primer value me sirva para una consulta y el segundo que sea el que se inserte en la base de datos.

lo que pasa es que necesito que el primer value sea el id esto para una consutla que realizo donde necesito el id y el segundo value que me muestre el nombre que es lo que quiero guardar de ese select

este es mi select:

<select  name="servicio" id="servicio" class="form-control" onchange="mifuncion(this.value)">
        <option value="">Seleccione...</option>
        <?php
            $query="SELECT  * FROM tipos_servicios";
            $result=mysqli_query($con, $query) or die (mysqli_error());
            while ($row=mysqli_fetch_array($result)){ 
            echo '<option value="'.$row['id_servicio'].'">'.$row['tipo_servicio'].'</option>';
          }
        ?>
    </select>
5
  • Requieres que el id este forzosamente como una option del select? Me refiero a que si deseas que pueda ser modificado
    – Arreguin92
    Commented el 10 jun. 2019 a las 18:30
  • si mira lo que pasa es que en una consulta necesito el id , pero tambien necesito insertar en la base de datos el tipo de servicio, no su id lo mas facil seria: echo '<option value="'.$row['tipo_servicio'].'">'.$row['tipo_servicio'].'</option>'; Commented el 10 jun. 2019 a las 18:33
  • si pongo esa linea de codigo si se inserta el nombre del tipo de servicio pero tuve que quitar el id_servicio y ya no funciona mi consulta no se si me entiendas Commented el 10 jun. 2019 a las 18:33
  • ¿Si colocaras en un <input type="hidden"> el id y dejaras los resultados de tu query en el select no te funcionaria?
    – Arreguin92
    Commented el 10 jun. 2019 a las 18:41
  • no creo , ya que el id no es estático cambia dependiendo de lo que yo seleccione al igual que el tipo de servicio Commented el 10 jun. 2019 a las 18:44

4 respuestas 4

6

Primero y solo para que lo tengas en cuenta por si acaso, capaz te conviene guardar en la base de datos el mismo id. Dependiendo del requermiento y todo lo demás.

Ahora con tu caso se me ocurren dos cosas, la primera es colocar un campo hidden que va a contener el texto de la opcion seleccionada, así cuando se envíe el formulario en el campo como tal "servicio" va a estar el id y en el otro campo que puede ser "servicio_name" el nombre.

function cambio(){
	document.getElementById("servicio_name").value = document.getElementById("servicio").innerText
}
<select id="servicio" onchange="cambio()">
  <option value="1">mecanica</option>
  <option value="2">motor</option>
</select>
<input type="hidden" id="servicio_name" name="servicio_name" value="">

Para obtenerlo en el php como de constumbre:

$id = $_POST['servicio']
$nombre = $_POST['servicio_name']

Lo segundo es que el value lo separes con un guión, de manera que sabes que del lado izquierdo tendrás el id y del lado derecho el nombre:

echo '<option value="'.$row['id_servicio'].'-'.$row['tipo_servicio'].'"></option>';

value = "1-mecanica"

Luego en el php lo separas con la función explode:

$serciveIdAndName = explode("-", $_POST['servicio']);
echo $serciveIdAndName[0]
echo $serciveIdAndName[1]

Saludos.

1
  • muchas gracias la opción del input hidden creo era la mas sencilla y para este caso me funciono Commented el 10 jun. 2019 a las 19:18
2

Podrías usar atributos personalizados de html5 !con eso podrías agregar valores importantes a tu option osea mas de uno ejemplos (data-nombre,data-encargado,data-duracion, etc). Luego lo procesas mediante javascript puro o jquery como desees, para el caso creo que seria una excelente opción enviar los datos por ajax que mediante un formulario de la forma tradicional. Para tu caso quedaría de esta forma:

echo '<option value="'.$row['id_servicio'].'" data-nombreservicio="'.$row['tipo_servicio'].'">'.$row['tipo_servicio'].'</option>';

JavaScript (debes quitar el this.value )

    function mifuncion()
    {
        var id_servicio=document.getElementById(servicio");
        var servicio = document.getElementById('servicio').dataset.nombreservicio;
    }

suerte!

1
  • con estos atributos como los pasaría por ajax ? si quiero mandar el id como quedaría la estructura en el data: Commented el 10 jun. 2019 a las 19:22
1

Puedes obtener el value y el texto del option seleccionado de esta forma, cualquier duda hazla saber.

$('#servicio').change(function(){

console.log($(this).val());

console.log($('#servicio option:selected').text());


})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select  name="servicio" id="servicio" class="form-control">
        <option value="">Seleccione...</option>
        <option value="1">Limpieza</option>
        <option value="2">Comedor</option>
    </select>

0

Una forma limpia que se me ocurre de hacerlo es crear un Array de objetos y ahí almacenar los datos con el ID.

<select>
  <option value="1">opción 1</option>
  <option value="2">opción 2</option>
  <option value="3">opción 3</option>
</select>

<script>
  var objetos = [
  {
    value: 1,
    dato1: "lo que sea",
    dato2: "lo que sea"
  },
  {
    value: 2,
    dato1: "lo que sea",
    dato2: "lo que sea"
  },
  {
    value: 3,
    dato1: "lo que sea",
    dato2: "lo que sea"
  },
]//después usas este arreglo para comparar y buscar con el método .find() de JS 
 //los dos valores según el value de la opción
</script>
1
  • ok ok muy bien perfecto muchas gracias Commented el 11 jun. 2019 a las 14:16

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.