1

Podrían echarme una mano en lo siguiente, estoy trabajando con ASP.NET MVC, para capturar el texto del combo seleccionado y ponerlo al modelo utilizo un hidden, tengo algo como esto:

$(function () {
  $("#datosCombo").change(function () {
    var selTypeText = $("#datosCombo option:selected").text();
    $("#DatosComboDescripcion").val(selTypeText);
  });
});

<select class="form-control" data-val="true" data-val-number="El campo debe ser un número." data-val-required="El campo es obligatorio." id="datosCombo" name="datosCombo">
  <option value="5">100000211639</option>
  <option value="6">200000211639</option>
  <option value="7">300000211639</option>
  <option value="8">400000211639</option>
</select>
<input id="datosComboDescripcion" name="datosComboDescripcion" type="hidden" value="100000211639">

Todo funciona correctamente, cada que selecciono un elemento del combo mi variable hidden actualiza su valor (es el objetivo).

El problema es el siguiente: Si tengo 10 combos tendría que tener 10 Scripts y eso no me parece muy mantenible.

Lo que quiero llegar a hacer es: Tener un Script genérico que detecte el evento de cualquier combo y lo asigne a una variable, así si es que tengo 10 combos, todos estos combos agarren automáticamente esta función cuando se dispare su evento y asignen al hidden su text.

Nota. Si es que sirve de algo el hidden siempre tendrá el nombre del combo mas descripción: "NombreCombo" + "Descripcion"

1
  • puedes hacer un bucle para los combos (usar la función .each()). Y si solo te interesa que solo se actualize el actual, puedes usar this para que solo afecte al combo al que ocurrido el evento change con un if
    – Zander
    Commented el 10 ene. 2017 a las 15:32

3 respuestas 3

0

Para eso puedes obtener el ID del combo, almacenarlo en una variable, y buscar el ID del input hidden con el valor almacenado.

Ejemplo: https://jsfiddle.net/oaqsafux/1/

JQUERY:

$(document).ready(function() {
    $("select").on("change", function() {
        var id = $(this).attr("id");
        var txt = $(this).find("option:selected").text();
        $("#"+id+"Descripcion").val(txt);
    });
});

Cuando un select cambie, obtienes su id, entonces buscas el input hidden que como nos mencionas tendrá ese id+Descripcion, y le añades ese valor del texto.

PD: no hagas caso a mi comentario en la pregunta, no se que se me pasaba por la cabeza @.@ PD2: no repitas id's, es algo que jquery cuando quiere buscar algo, seguramente te devolverá el primero que encontrará, y descartará cualquier otro.

5
  • 1
    Esto $(this).val() solo sacara el value de la opción seleccionada y no el texto. Saludos :D
    – JuankGlezz
    Commented el 10 ene. 2017 a las 15:55
  • @JuankGlezz Gracias, se me pasó! Ahora actualizo la respuesta!
    – Zander
    Commented el 10 ene. 2017 a las 15:59
  • Muchas gracias esta es la que mas me sirvio y la aplique, en cuanto a los ID, tomando en cuenta que trabajo con ASP.NET MVC y que estos HTML's se generan en base a una clase (modelo) creo que nunca se repitirian los ID's. Saludos cordiales a todos.
    – RSillerico
    Commented el 10 ene. 2017 a las 21:18
  • A ver si se puede una mano con esto mas (en verdad soy malo con JQuery, soy mas Back), que en el cargado de la página, esos hidden tengan ya asignado el texto correspondiente al primer elemento del combo.
    – RSillerico
    Commented el 10 ene. 2017 a las 21:52
  • @RSillerico puedes hacer otro script similar justo al cargar la página $(document).ready(); con .each(function() { /*código aquí*/ }) en vez del .on("change")
    – Zander
    Commented el 11 ene. 2017 a las 8:05
0

Yo usaría clases ya que los id en jQuery siempre obtendrá el primero con ese id y dejaría tu función de esta manera:

$(function () {
  $(".datosCombo").change(function () {
    var selTypeText = $('.datosCombo option').eq($(this).val()-1).text()
    $('.datosCombo').siblings('.datosComboDescripcion').val(selTypeText);
  });
});

La cual seria de manera obligatoria mantener las clases datosCombo en el select y el el input la clase datosComboDescripcion. Y también mantener esos elementos separados ya sea por un div para evitar insertar el valor en un input incorrecto.
Ahora te explico como sacaría el valor:

  1. Obtengo el valor seleccionado con $(this).val() que devolvería el value del option seleccionado le resto uno ya que para los elementos siempre se comienza en 0 y así seleccionar el correcto.(this hace referencia al combo seleccionado no a todos)

  2. Obtener el texto de la opción seleccionada con $('.datosCombo option').eq().text()

    $('.datosCombo option').eq($(this).val()-1).text()
    
  3. Ahora buscamos al input tiene que ser por fuerza un elemento alineado al select y lo obtenemos con .siblings('.datosComboDescripcion')

  4. Introducimos el valor al input del select usado

    $('.datosCombo').siblings('.datosComboDescripcion').val(selTypeText);
    

Ejemplo Funcionando:

$(function () {
  $(".datosCombo").change(function () {
    var selTypeText = $('.datosCombo option').eq($(this).val()-1).text()
    $('.datosCombo').siblings('.datosComboDescripcion').val(selTypeText);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <select class="form-control datosCombo" data-val="true" data-val-number="El campo debe ser un número." data-val-required="El campo es obligatorio." id="datosCombo" name="datosCombo">
    <option value="5">100000211639</option>
    <option value="6">200000211639</option>
    <option value="7">300000211639</option>
    <option value="8">400000211639</option>
  </select>
  <input class="datosComboDescripcion" name="datosComboDescripcion" type="hidden" value="100000211639">
</div>
<div>
  <select class="form-control datosCombo" data-val="true" data-val-number="El campo debe ser un número." data-val-required="El campo es obligatorio." id="datosCombo" name="datosCombo">
    <option value="5">100000211639</option>
    <option value="6">200000211639</option>
    <option value="7">300000211639</option>
    <option value="8">400000211639</option>
  </select>
  <input class="datosComboDescripcion" name="datosComboDescripcion" type="hidden" value="100000211639">
</div>

0

espero que te sirvan con los cambios que le hice

    $(".datosCombos").change(function () {
        var ref = $(this).data('ref');
        var selTypeText = $("#"+ this.name +" option:selected").text();
        $("#" + ref).val(selTypeText);
    });


<select class="form-control datosCombos" data-ref="datosComboDescripcion" data-val="true" data-val-number="El campo debe ser un número." data-val-required="El campo es obligatorio." id="datosCombo" name="datosCombo">
  <option value="5">100000211639</option>
  <option value="6">200000211639</option>
</select>
<select class="form-control datosCombos" data-ref="datosComboDescripcion2" data-val="true" data-val-number="El campo debe ser un número." data-val-required="El campo es obligatorio." id="datosCombo2" name="datosCombo2">
  <option value="7">300000211639</option>
  <option value="8">400000211639</option>
</select>
<input id="datosComboDescripcion"  name="datosComboDescripcion" type="hidden" value="100000211639">
<input id="datosComboDescripcion2"  name="datosComboDescripcion2" type="hidden" value="100000211639">
3
  • Te sugiero que expliques un poco mas, el porque esos cambios en que le ayudan etc.. Saludos
    – JuankGlezz
    Commented el 10 ene. 2017 a las 16:06
  • únicamente convertí genérica la función y le agregue una clase y un data-ref al combobox hacia el campo hidden. no fueron grandes cambios.
    – Luis Perez
    Commented el 10 ene. 2017 a las 16:11
  • Así no haya sido gran cosa es bueno explicarle porque, te puedes ahorrar muchas preguntas de futuros usuarios y se vuelve mas completa tu respuesta
    – JuankGlezz
    Commented el 10 ene. 2017 a las 16:15

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.