0

Estoy trabajando con un select y quiero obtener el valor del option que cambia y pasarlo a la función string con el fin de realizar una consulta asíncrona a la base de datos con Ajax, sin embargo siempre obtengo undefined, siempre he tenido muchos problemas cuando tengo que pasar valores de una función a otra y la verad no se cual es el metodo apropiado para hacerlo.

Gracias por la ayuda

<div class="filters bg-light border-bottom">
    <div class="container">
        <nav class="navbar navbar-expand-md navbar-light bg-light pr-0 pl-0 pt-4 pb-3">
            <a class="navbar-brand d-block d-md-none" href="#">Filtros</a>
            <button class="navbar-toggler border-0 pr-0 pl-0 text-dark filters_btn" type="button" data-toggle="collapse" data-target="#filtersToggle" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-arrow-bar-down" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M1 3.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5zM8 6a.5.5 0 0 1 .5.5v5.793l2.146-2.147a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-3-3a.5.5 0 0 1 .708-.708L7.5 12.293V6.5A.5.5 0 0 1 8 6z"/>
                  </svg>
            </button>
            <div class="collapse navbar-collapse" id="filtersToggle">
        <div class="container pt-5 pb-5">
            <div class="row">
                <%if( all_brands) { %>
                <form action="/product/filters" method="GET" class="w-100 d-flex flex-wrap">
                    <div class="col-12 col-md-3 mt-4 p-0 pr-0 pr-md-3 mt-md-0">
                        <select class="form-control capitalize" id="brand_filter" name="brand">
                            <option value="no_brand" disabled selected>Seleccione una marca</option>
                                <% for(i=0; i<all_brands.length; i++){ %>
                                    <option value=<%= all_brands[i] %>><%= all_brands[i] %></option>
                                <% } %>    
                        </select>
                    </div>
                    <div class="col-12 col-md-3 pr-0 pr-md-3 p-0 mt-4 mt-md-0">
                        <select class="form-control" id="model_filter" name="model" disabled>
                            <option disabled selected>Seleccione un modelo</option>
                          </select>
                    </div>
                    <div class="col-12 p-0  pr-0 pr-md-3 col-md-3 mt-4 mt-md-0">
                        <select class="form-control" id="initialPrice_filter" name="initialPrice">
                            <option disabled selected>Precio desde</option>
                            <option>chevrolet</option>
                          </select>
                    </div>
                    <div class="col-12 p-0  pr-0 col-md-3 mt-4 mt-md-0">
                        <select class="form-control" id="finalPrice_filter" name="finalPrice">
                            <option disabled selected>precio hasta</option>
                            <option>chevrolet</option>
                          </select>
                    </div>
                    <div class="col-12 p-0 pr-0 pr-md-3 col-md-3 mt-4">
                        <select class="form-control" id="AutoManual_filter" name="AutoManual" disabled>
                            <option disabled selected>Transmisión</option>
                          </select>
                    </div>
                    <div class="col-12 p-0 pr-0 pr-md-3 col-md-3 mt-4">
                        <select class="form-control" id="initialKm_filter" name="initialKm">
                            <option disabled selected>Kilometrage desde</option>
                            <option>chevrolet</option>
                          </select>
                    </div>
                    <div class="col-12 p-0 pr-0 pr-md-3 col-md-3 mt-4">
                        <select class="form-control finalKm" name="finalKm" id="finalKm_filter">
                            <option disabled selected>Kilometrage hasta</option>
                            <option>chevrolet</option>
                          </select>
                    </div>
                    <div class="col-12 p-0 col-md-3 mt-4">
                        <select class="form-control" name="color" id="filter">
                            <option disabled selected>Color</option>
                            <option>chevrolet</option>
                          </select>
                    </div>
                    <button class="btn btn-primary">Enviar</button>
                </form>
               <% } %>    
            </div>
        </div>
    </nav>
    </div>
</div>

Codigo js

  //select
    const brand_filter = document.getElementById("brand_filter");

 const params = {};   
 
    params.car_brand = () => {
        if(brand_filter){
            brand_filter.addEventListener("change", function(){
                return brand_filter.value;
            });
        }
    }
    
    

    
    function string(){
        var x = params.car_brand ()
        console.log(x);
    }
    
    string();
4
  • sé más específico con esta pregunta, agradecería si pudieras poner el código HTML
    – Rodrigo
    Commented el 25 dic. 2020 a las 3:32
  • Hola, si ya puse el html Commented el 25 dic. 2020 a las 3:36
  • Pon el codigo JS Commented el 25 dic. 2020 a las 3:37
  • El código JS está abajo del HTML
    – Rodrigo
    Commented el 25 dic. 2020 a las 3:45

1 respuesta 1

2

El problema es que estás tratando de obtener el valor antes de que se modifique.

Prueba con esto

const params = {
   card_brand: () => {
      return brand_filter.value;
   }
};

brand_filter.addEventListener("change", () => {
   console.log(params.card_brand());
});

// Los elementos con ID único de HTML se convierten en constantes de javascript
1
  • Ahora si funcionaria, esto es correcto.
    – Layer
    Commented el 25 dic. 2020 a las 3:58

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.