0

Tengo una serie de combos de tipo <select> donde se tienen que mostrar tres valores y que se estan mostrando bien. La funcionalidad que necesito es que al recibir el foco, es decir que se haga click o que tabulando se llege a el y se despliege, se elimine uno de los valores pero unicamente para ese combo,en concreto el que tiene por valor vacio option[value='']

Estoy intentando hacerlo creando una clase llamada .eliminarblanco que tienen todos los combos pero no consigo seleccionar dentro de la función el elemento en concreto que hace click, el que llega por el evento, para que lo elimine

     $(".eliminarblanco").on('focus', function (event) {
        //Aqui es donde no veo como hacer para que en pseudocodigo fuese algo como $((this).option[value='']").remove();
    });

Muchas gracias

2 respuestas 2

2

Podrías utilizar la función .find() para buscar la opción a eliminar y después eliminarla, algo talque asi:

$(".eliminarblanco").on('focus', function (event) {
        $(this).find("option[value='']").remove();
});

Ejemplo

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    </head>
    <body>
        <select name="cars" class="eliminarblanco">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="mercedes">Mercedes</option>
            <option value="">Audi</option>
          </select>
    </body>
    <script>
        $(".eliminarblanco").on('focus', function (event) {
            $(this).find("option[value='']").remove();
    });
    </script>
</html>

1

Un modo sencillo de hacerlo es con ocultando con hide la opción según su valor. Para que sea en el select en el que haces click, recoges la id en el evento click y gestionas las opciones para esa id. Ejemplo:

$(".myselect").click(function() {
    var id = $(this).attr('id');
    $('#'+id+' option[value=""]').hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="select1" class="myselect">
  <option value="0">Selecciona</option>
  <option value="">Opción a borrar</option>
  <option value="1">Opción 1</option>
  <option value="2">Opción 2</option>
</select>
<select id="select2" class="myselect">
  <option value="">Opción a borrar</option>
  <option value="1">Opción 1</option>
  <option value="2">Opción 2</option>
</select>

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.