0

Hola estoy tratando de rellenar 2 inputs con un select option, cuando selecciono una opcion solo me rellena el input de Factura pero no el de concepto, estos datos vienen de la misma tabla.

(Obtengo los datos buscando por correlativo de factura, y en esa consulta aprovecho de traerme también otros campos)

  <tbody>
                        <tr id="product0">
                            <td>
                                <select name="products[]" class="form-control" id="opciones"
                                    onchange='cambioOpciones();'>
                                    <option value="">Seleccione Venta</option>
                                    @foreach ($ventas1 as $ventas)
                                    <option  value="{{$ventas->FACTURA}}">
                                        {{ $ventas->FACTURA }} {{ $ventas->CONCEPTO }}
                                    </option>
                                    @endforeach
                                </select>
                            </td>
                            <td>
                                <input type="number" name="quantities[]" class="form-control" value="1" />
                            </td>
                        </tr>
                        <tr id="product1"></tr>
                    </tbody>
                </table>

                <br> Factura <input type='text' id='showId' />
                <br> Concepto <input type='text' id='Concepto' />

Mi código en javascript

@section('scripts')
<script>
function cambioOpciones()
{
  var combo = document.getElementById('opciones');
  document.getElementById('showId').value=document.getElementById('opciones').value;
}
</script>
3
  • Hello Friend, your Post has a problem and is written in a different Language than the expected on the Site; I recommend that you translate it into Spanish.
    – user46896
    el 16 sep. 2022 a las 13:55
  • Hola, Bienvenid@ al Sitio, veo que eres nuev@ te recomendaria hacer el recorrido de bienvenida para que conoscas mejor el sitio, He mirado tu post y te comento lo siguiente:, Puedes leer este Articulo Cómo preguntar para que tu pregunta sea mejor recibida, Puedes leer este Articulo ejemplo mínimo verificable, También es importante que sepas que preguntas son mal vistas centro de ayuda.
    – user46896
    el 16 sep. 2022 a las 13:55
  • creo que te hace falta saber cuando esta cargada la pagina, el dom y el html no ??? algo asi como: document.readyState === "complete" || document.readyState === "interactive"
    – user46896
    el 16 sep. 2022 a las 13:55

1 respuesta 1

0

El valor de un elemento select referencia al elemento option que se haya seleccionado. En eso estamos todos de acuerdo. Sin embargo, lo anterior no está aludiendo al texto que esa opción le muestra al usuario, sino al atributo value del elemento option.

En este momento tus options tienen como valor el correlativo de factura, y como texto la concatenación de este último con el concepto de la misma.

Ya sea que lo obtengas del valor de la opción, o de su texto (que se haría de otra manera, como explican acá), meter dos datos en un solo campo implica alguna clase de serialización. Algo tan simple como concatenarlos con un underscore sería suficiente. Por ejemplo

 <option value="{{ $factura->NUMERO }}_{{ $factura->CONCEPTO }}"> etc etc

Y luego, en tu función, explotar ese valor para computar la parte número y la parte concepto:

function cambioOpciones(e) {
  const combo = document.getElementById('opciones'),
    [id, concepto] = document.getElementById('opciones').value.split('_');
  document.getElementById('showId').value = id;
  document.getElementById('Concepto').value = concepto;
}
<select name="opciones[]" id="opciones" onchange="cambioOpciones();">
  <option></option>
  <option value="1_alimentos">N°1, alimentos</option>
  <option value="2_vestuario">N°2, vestuario</option>
</select>
<input id="showId" />
<input id="Concepto" />

Si quisieras poner el concepto en otro atributo de cada opción, o bien si quisieras usar el texto de la opción, no podrás obtenerlo directamente del select. Este último sólo te servirá para identificar la opción seleccionada, y de ésta sí podrás sacar lo que buscas:

function cambioOpciones(e) {
  const combo = document.getElementById('opciones'),
    option = combo.options[combo.selectedIndex],
    id = option.value,
    concepto = option.getAttribute('rel');
  document.getElementById('showId').value = id;
  document.getElementById('Concepto').value = concepto;
}
<select name="opciones[]" id="opciones" onchange="cambioOpciones();">
  <option></option>
  <option value="1" rel="alimentos">N°1, alimentos</option>
  <option value="2" rel="vestuario">N°2, vestuario</option>
</select>
<input id="showId" />
<input id="Concepto" />

para, mediante sus atributos selectedIndex (representa en qué posición está la opción seleccionada) o selectedOption (representa el elemento option seleccionado) , poder

Tu Respuesta

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

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