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
    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
    el 8 oct. 2019 a las 3:02
  • Me alegro que lo hayas resuelto, @JavierMMM
    – ElChiniNet
    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
    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
    el 5 oct. 2019 a las 23:35
  • Ese es el código completo
    – JavierMMM
    el 7 oct. 2019 a las 18:10

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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