1

Tengo un select que lleno de manera dinámica al consultar mi base de datos. Usando $("#mi_id").val() obtengo el valor correctamente, pero lo que necesito es obtener la etiqueta que se ha seleccionado, pero $("#mi_id").attr("nombre_atributo"); me regresa undefined.

Esta es la forma en que lleno las opciones del select y con lo cual no tengo problemas:

archivo r_egresos.php

<select id="proveedor" name="proveedor" class="form-control" autofocus required></select>

function b_proveedor() {
    var proveedores = "";
    $.ajax({
        url:"egresos_controller.php",
        dataType:"json",
        data: { axn: "b_proveedor" },
        type:"POST",
        success: function(data) {
            if (data != null || data != "") {
                proveedores += '<option value="0">---</option>' 
                $.each(data, function(key, value) {
                    proveedores += '<option data-nproveedor="'+value["nombre"]+'" value="'+value["id_proveedor"]+'">'+value["nombre"]+'</option>'
                });
            } else {
                proveedores += '<option value="0">No hay registros</option>'
                proveedores += '<option value="0">---</option>' 
            };
            $("#proveedor").empty().append(proveedores);
        },
        error: function() {
            alert("error");
        }
    })
}

Y de esta forma es como estoy tratando de obtener la etiqueta:

archivo Funciones.js

$("#proveedor").on("change", function() {
    var data1 = $('#proveedor').data("nproveedor");
    var data2 = $('#proveedor').val();
    var data3 = $('#proveedor').attr("nproveedor");
    var data4 = $('#proveedor').attr("data-nproveedor");
});

Pero me regresa undefined.

Ya pobre con data-nproveedor="'+value["nombre"]+'" pero al tratar de leerlo me regresa también undefined.

1
  • ¿Por alguna razón usas nproveedor? Porque si lo que buscas es el obtener el texto de la opción seleccionada puedes obtenerlo sin tener que crear un attr
    – Marcos
    Commented el 7 oct. 2019 a las 20:46

2 respuestas 2

4

Los elementos que tienen asignada la propiedad data-nproveedor son los elementos options dentro del select. Sin embargo estás intentando acceder a la propiedad data del select en sí mismo. Observa el siguiente snippet, creo que te dará una idea de dónde está tu error:

var $select = $('select');

$select.on('change', function () {
  $option = $select.find('option:selected');
  console.log( $option.data('atributo') );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select>
  <option data-atributo="valor 1" value="1">número 1</option>
  <option data-atributo="valor 2" value="2">número 2</option>
  <option data-atributo="valor 3" value="3">número 3</option>
  <option data-atributo="valor 4" value="4">número 4</option>
  <option data-atributo="valor 5" value="5">número 5</option>
</select>

2
  • 1
    Muchas gracias..... Tienes toda la razón, tenía que obtener la opción seleccionada. Es la solución perfecta
    – JavierMMM
    Commented el 8 oct. 2019 a las 3:02
  • Me alegro que lo hayas resuelto, @JavierMMM
    – ElChiniNet
    Commented el 8 oct. 2019 a las 5:41
0

Tu problema está aquí:

$.each(data, function(key, value){
 proveedores += '<option nproveedor="'+value["nombre"]+'"value="'+value["id_proveedor"]+'">'+value["nombre"]+'</option>'});

Reemplaza por:

$.each(data, function(key, value){
 proveedores += '<option data-nproveedor="'+value["nombre"]+'"value="'+value["id_proveedor"]+'">'+value["nombre"]+'</option>'});
3
  • No me funciona, he usado de la siguiente manera y nada: <option data-nproveedor="'+value["nombre"]+'" value="'+value["id_proveedor"]+'">'+value["nombre"]+'</option> y trato de leerlo de las siguiente formas y nada: var data1 = $('#proveedor').data("nproveedor"); var data4 = $('#proveedor').attr("data-nproveedor"); el resultado es el mismo, undefined
    – JavierMMM
    Commented el 5 oct. 2019 a las 23:12
  • Edita tu pregunta y agrega todos el código que crees que hace falta para que podamos reproducir tu escenario :)
    – fredyfx
    Commented el 5 oct. 2019 a las 23:35
  • Ese es el código completo
    – JavierMMM
    Commented el 7 oct. 2019 a las 18:10

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.