3

Lo que pasa es lo siguiente tengo este select

<select required="required" class="form-control" name="servicio">
   <option value="" selected="selected"></option>
   <option value="1">HelpDesk</option>
   <option value="1">HelpDesk2</option>
</select>
<input id="servicioSelecionado" name="nom_Servicio" type="hidden" value="prueba">

Lo que necesito es:

el valor es el que esta entre los option <option>Valor</option> en este caso HelpDesk o Heldesk2 .

Cuando el usuario seleccione una opcion el valor que necesito debe almacenarse en el valor del hidden. En el caso de que el usuario luego cambie de opinión y seleccione otra opcion se actualice el hidden con el nuevo dato para que cuando se envie el formulario la variable este actualizada con la opcion que tiene el usuario. Selecionada

Es decir lo unico que necesito es tener el hidden actualizado con en el momento que se envie el formulario.

2 respuestas 2

16

Escuchando el evento Change() para luego acceder al texto del option seleccionado mediante text() (modifiqué a tipo text el input para que se mostrará el resultado)

$(document).on('change', '#servicio', function(event) {
     $('#servicioSelecionado').val($("#servicio option:selected").text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select required="required" class="form-control" name="servicio" id="servicio">
<option value="" selected="selected"></option>
<option value="1">HelpDesk</option>
<option value="2">HelpDesk2</option>
</select>
<br>
<br>
<input id="servicioSelecionado" name="nom_Servicio" >

-1

JS

function fillBook(){    
   var first_select = document.getElementById('first-select').value;
   var second_select = document.getElementById('second-select').value;
   console.log('Primer select -> '+first_select);
   console.log('Segundo select -> '+second_select)
}

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<select id="first-select">
  <option value="1">Primera opcion</option>
  <option value="2">Segunda opcion</option>
  <option value="3">Tercera opcion</option>
  <option value="4">Cuarta opcion</option>
  <option value="5">Quinta opcion</option>
</select>

<select id="second-select" onchange="fillBook();">
  <option value="1">Primera opcion</option>
  <option value="2">Segunda opcion</option>
  <option value="3">Tercera opcion</option>
  <option value="4">Cuarta opcion</option>
  <option value="5">Quinta opcion</option>
</select>
2
  • 2
    Por favor edita la pregunta y agrega un texto contando un poco: 1. Cómo este código soluciona el problema planteado, 2. Qué hace este código.
    – Shaz
    Commented el 10 jun. 2019 a las 0:46
  • En el codigo anterior se muestra la forma en como podemos obtener el id de 2 select diferentes. En donde se coloca el evento onchange en el select y entre comillas el nombre de la funcion que se tiene en el js
    – S. Pérez
    Commented el 12 jun. 2019 a las 17:50

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