Update from change in select

Question

Update from change in select

Navigation

#1 by (6 votes)
#2 by (1 votes)

5

I have a list with multiple selects and I need to change the select option to be updated in the database. I can do this through ajax + php. My question actually is how to trigger the event from the option change. Could someone give me a light? There are several selects and they should trigger the event only from the selected select.

.linha {
  display: block;
  width: 900px;
}
.selects {
  float: left;
  display: block;
}

<div class="linha">
  <div class="selects">
    <label>JAN</label>
    <select>
      <option value="N">Não</option>
      <option value="OK">OK</option>
      <option value="">-</option>
    </select>
  </div>
  <div class="selects">
    <label>FEV</label>
    <select>
      <option value="N">Não</option>
      <option value="OK">OK</option>
      <option value="">-</option>
    </select>
  </div>
  <div class="selects">
    <label>MAR</label>
    <select>
      <option value="N">Não</option>
      <option value="OK">OK</option>
      <option value="">-</option>
    </select>
  </div>
  <div class="selects">
    <label>ABR</label>
    <select>
      <option value="N">Não</option>
      <option value="OK">OK</option>
      <option value="">-</option>
    </select>
  </div>
  <div class="selects">
    <label>MAI</label>
    <select>
      <option value="N">Não</option>
      <option value="OK">OK</option>
      <option value="">-</option>
    </select>
  </div>
  <div class="selects">
    <label>JUN</label>
    <select>
      <option value="N">Não</option>
      <option value="OK">OK</option>
      <option value="">-</option>
    </select>
  </div>
</div>
<BR>
<BR>
<div class="linha">
  <div class="selects">
    <label>JAN</label>
    <select>
      <option value="N">Não</option>
      <option value="OK">OK</option>
      <option value="">-</option>
    </select>
  </div>
  <div class="selects">
    <label>FEV</label>
    <select>
      <option value="N">Não</option>
      <option value="OK">OK</option>
      <option value="">-</option>
    </select>
  </div>
  <div class="selects">
    <label>MAR</label>
    <select>
      <option value="N">Não</option>
      <option value="OK">OK</option>
      <option value="">-</option>
    </select>
  </div>
  <div class="selects">
    <label>ABR</label>
    <select>
      <option value="N">Não</option>
      <option value="OK">OK</option>
      <option value="">-</option>
    </select>
  </div>
  <div class="selects">
    <label>MAI</label>
    <select>
      <option value="N">Não</option>
      <option value="OK">OK</option>
      <option value="">-</option>
    </select>
  </div>
  <div class="selects">
    <label>JUN</label>
    <select>
      <option value="N">Não</option>
      <option value="OK">OK</option>
      <option value="">-</option>
    </select>
  </div>
</div>

jquery html5 ajax jquery-validate jquery-mobile

asked by anonymous 27.08.2015 / 17:19

2 answers

6

It can be used in several ways, I suggest 2:

First place the call of the direct function on the element's event like this:

   <select onchange="funcaoJavascript()">
      <option value="N">Não</option>
      <option value="OK">OK</option>
      <option value="">-</option>
    </select>

Or using jquery you can create an "event listener" that keeps watching and waiting for the event to occur so in this case you need to specify each select with a class or an ID if you want different behavior for each select: Let's say:

<select id="teste">

$('#teste').change(function(){
//aqui dentro pode-se referenciar o select que disparou o evento assim $(this)
});

In this example it will fire based on the test id, but you can do one that fires with any select like this:

$('select').change(function(){

});

An example in the fiddle to close:

link

Note: the onchange function was not able to do funfice on the fiddle. Oo rs n know why it has some witchcraft, but the syntax is there. abc

27.08.2015 / 17:37

Is it possible to create graphical interfaces for Python applications? Database connection error

score 1 · Accepted Answer

Here's an example to simplify what you want to do, this will centralize the update on only one request ajax , I used the data attribute, passing data-tipo to each select. As the values are similar, in the ajax request you will pass the type field and the value field, take a look:

$(function(){
	$('select').change(function(){
    	alert('Tipo:'+$(this).attr('data-tipo')+' Valor:'+$(this).val());
		//Faz uma requisição ajax passando tipo e valor
    });
});

.linha {
  display: block;
  width: 900px;
}
.selects {
  float: left;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="linha">
  <div class="selects">
    <label>JAN</label>
    <select data-tipo="JAN">
      <option value="N">Não</option>
      <option value="OK">OK</option>
      <option value="">-</option>
    </select>
  </div>
  <div class="selects">
    <label>FEV</label>
    <select data-tipo="FEV">
      <option value="N">Não</option>
      <option value="OK">OK</option>
      <option value="">-</option>
    </select>
  </div>
  <div class="selects">
    <label>MAR</label>
    <select data-tipo="MAR">
      <option value="N">Não</option>
      <option value="OK">OK</option>
      <option value="">-</option>
    </select>
  </div>
  <div class="selects">
    <label >ABR</label>
    <select data-tipo="ABR">
      <option value="N">Não</option>
      <option value="OK">OK</option>
      <option value="">-</option>
    </select>
  </div>
  <div class="selects">
    <label>MAI</label>
    <select data-tipo="MAI">
      <option value="N">Não</option>
      <option value="OK">OK</option>
      <option value="">-</option>
    </select>
  </div>
  <div class="selects">
    <label>JUN</label>
    <select data-tipo="JUN">
      <option value="N">Não</option>
      <option value="OK">OK</option>
      <option value="">-</option>
    </select>
  </div>
</div>