Event OnChange jQuery HTML

Question

Event OnChange jQuery HTML

Navigation

#1 by (3 votes)
#2 by (1 votes)

3

I do not achieve that when selecting an option that is not the first, the parameter is sent correctly to the function Export() . The alert I throw it correctly with the option that I select. But when sending the parameter, always send the first one.

Form:

  var a = $("#paquetes option:selected" ).text();
    $('#paquetes').on('change', function() {
      alert( this.value );
      var a = $("#paquetes option:selected" ).text();
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="paquetes" class="selectpicker" onchange="">
    <optgroup label="Seleccionar paquete a exportar">
      <option>A</option>
      <option>B</option>
      <option>C</option>
      <option>D</option>
      </optgroup>
    </select>

    
  

     <button onclick="Export(a)" id="enviar" class="btn btn-success">Exportar a Excel</button>

All this is within a form.

jquery html

asked by Santiago 28.07.2017 в 03:37

source

2 answers

1

If you want to link it to the press of a button, you can hear the onclick of the button. But it is necessary to give another id to your button, it is not advisable to have two elements with the same id. In this case it has given you the id btn .

$(function() 
{
  
  
  //Escuchando el botón mediante su id (btn)
  $("#btn").click(function() 
  {
      var a = $("#paquetes option:selected" ).text();
      alert("Valor es: "+a);
  });


  //La acción se puede lanzar desde aquí si se quiere
  //a no ser que haga falta otro dato o verificación antes de lanzarla

  $('#paquetes').on('change', function() 
  {
      alert("La acción se puede lanzar aquí, ¿por qué no? "+ this.value );
   })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="paquetes" class="selectpicker" onchange="">
    <optgroup label="Seleccionar paquete a exportar">
      <option>A</option>
      <option>B</option>
      <option>C</option>
      <option>D</option>
      </optgroup>
    </select>

     <button id="btn" class="btn btn-success">Exportar a Excel</button>

Also, you can launch the action in onchange as you currently have, only in that case you must show a predefined option with a message as --Seleccione opción-- , otherwise you could not send A to the first if you wish, and you should check that this predefined option is never sent.

answered by 28.07.2017 в 04:06

Angular ng-repeat and ng-if paint lines How to move the decimal point to the left n spaces with Jquery or JS?

score 3 · Accepted Answer

You must remove the reserved word var when wanting to assign a new value to the global varible a . The problem is that you are defining a local variable (within the scope of the function) with the same name of a global variable, that is, you are initializing two variables with the same name instead of assigning a value to the global variable that already you created That is why it always sends the first option of the select as an argument, because the value of the variable a is never overwritten with that of the option selected.

  function Export(a) {
      console.log("Argumento: " + a);
  }

  var a = $("#paquetes option:selected" ).text();
    $('#paquetes').on('change', function() {
      // Para asignar un nuevo valor a la variable global "a" no se usa var, 
      // solo el nombre de la variable
      a = $("#paquetes option:selected" ).text();
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="paquetes" class="selectpicker" onchange="">
    <optgroup label="Seleccionar paquete a exportar">
      <option>A</option>
      <option>B</option>
      <option>C</option>
      <option>D</option>
    </optgroup>
</select>

<button onclick="Export(a)" id="enviar" class="btn btn-success">Exportar a Excel</button>