Update from change in select

Question

Update from change in select

Asked 8 years, 10 months ago

Viewed 855 times

5

I have a list of multiple selects and I need you to update the select option in the database. I can do this through ajax + php. My doubt is actually how to trigger the event from the option change. Could someone give me a light? They are multiple 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>

2 answers

1

Here’s an example to simplify what you want to do, so you’ll center the update on just one request ajax, used the attribute data, passing the data-tipo for each select. How the values are similar in the request ajax you will pass the type field and the value field, take a look at:

$(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>
<div class="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>

Browser other questions tagged jquery html5 ajax jquery-mobile jquery-validate

You are not signed in. Login or sign up in order to post.

by Guerra • **8,533** points · Answer 1 · 2015-08-27T15:37:33+00:00

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

First place the function call directly in the element 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: Say:

<select id="teste">

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

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

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

});

An example in the fiddle to close:

https://jsfiddle.net/65977v9c/

Note: the function of the onchange could not function in fiddle Oo rs n sei pq has some witchcraft, but the syntax ta there. abç