Home / Questions / 236155
Accepted
José Alberto Lira
Asked: 2020-02-08 12:47:54 +0800 CST 2020-02-08 12:47:54 +0800 CST

Select is not reset

  • 772

I fill several <select>together with others <input>inside a <form>modal window with data from the server. I use the same form to display the data of a selected record and to enter a new one.

After displaying a selected record, when exiting the modal, I want to reset all the <input>and <select>and leave it ready in case they want to enter a new record.

For this I use $('#id_miformulario')[0].reset();and also $('#id_miformulario').trigger('reset');but it only resets the <input>, it <select>leaves them with the text brought from the server in the query.

I used $('#id_miinput').text('');to reset those <select>and it does but then it doesn't load the default data from the server.

What am I doing wrong?

jquery

1 Answers

  1. Best Answer

    I hope you find it useful and it is what you need to do...

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!-- Librería Jquery, no es necesario si ya la importaste desde tus assets locales -->
    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
        crossorigin="anonymous"></script>
</head>

<body>
    <form id="id_miformulario">
        <input type="text" id="a" />
        <input type="text" id="b" />
        <input type="text" id="c" />
        <select id="">
            <option value="">Seleccionar</option>
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
        <select id="">
            <option value="">Seleccionar</option>
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
        <!-- Puedes llamar a la función cuando salgás del modal -->
        <input type="button" onclick="limpiar();" value="Limpiar" />
    </form>
</body>

</html>

<script>
    function limpiar() {
        // Esto es lo que estás haciendo en tu código para los inptus así que lo aplique
        $('#id_miformulario')[0].reset();
        // Elige alguna de estas dos formas
        // Por medio de jquery accedes a los select y remueves la propiedad de seleccionado (selected)
        $("option:selected").removeAttr("selected");
        // Si te das cuenta en los select tengo una opcion con un value "" (Seleccionar), 
        // entonces pongo el valor a "" para que el selected se posicione en esa opción
        $("option:selected").val = ""
    }
</script>**texto en negrita**
    • 0