重置选择框值

Question

I'm trying to make a reset button with jquery. I'm calling a function named cleanFilters when the button is clicked. But the console tells me cleanFilters is not defined. I'm very new in Javascript, so I guess I'm missing something stupid. I don't know if it matters but I have to say that the select I'm using is from Foundation 5.

This is my code

<script>
  $(function cleanFilters() {
    $('#select-filter-2').val('cualquier_provincia');
    $('#select-filter-2').trigger('change', true);
  });
</script>

<select name="" id="select-filter-2">
   <option value="cualquier_provincia">Cualquier provincia</option>
   <option value="A Coruña">A Coruña</option>
</select>

<button id="reset" onclick="cleanFilters()">Limpiar filtros de búsqueda</button> 

Answer 1

You shoud wrap the function definition inside an anonymouns one, not directly between the parenthesis: $(function(){/* here goes the code included function definitions * /})

Moreover when you define the cleanFilters function, it gets tied to the $(function(){}) scope where it is defined, that's why it is not accesible from onclick.

From my point of view you have two options:

• add this after function definition and remove the onclick

  $('#reset').click(function(){ cleanFilters(); })

or

• removing the $(...) around the function definition, which I don't recomend you because your code may fail if things delay longer than exepected to load.

Here is a working version http://jsbin.com/habiyubamo/edit

Answer 2

Found syntax errors, fixed and shown below

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>



    <select name="" id="select-filter-2">
        <option value="cualquier_provincia">Cualquier provincia</option>
        <option value="A Coruña">A Coruña</option>
    </select>

    <button id="reset" onclick="cleanFilters()">Limpiar filtros de búsqueda</button>


    <script>
        function cleanFilters() {
            $('#select-filter-2').val('cualquier_provincia');
            $('#select-filter-2').trigger('change', true);
        }
    </script>