Alterar value do <option> com jQuery
17/06/2015
0
Com base nisso aqui:
<label for="select-primeiro">→ Select #1 (tipo):</label> <select id="select-primeiro"> <option value="analitico">Analítico</option> <option value="sintetico">Sintético</option> </select> <br /><br /> <label for="select-segundo">→ Select #2 (turno):</label> <select id="select-segundo"> <option value="cafe" data-option="cafe">Café</option> <option value="almoco" data-option="almoco">Almoço</option> <option value="janta" data-option="janta">Janta</option> <option value="ceia" data-option="ceia">Ceia</option> </select>
Com jQuery, como faço para alterar o valor dos values do segundo <select> com base no primeiro? Se o usuario selecionar a opção sintetico, precisaria mudar o value cafe, almoco, janta e ceia para rcafe, ralmoco, rjanta, rceia [r = resumo, por isso trocaria com o sintetico] para que estes values conversassem corretamente com minha função sql.. Há jeito nisso?
Obs** Coloquei as tags Java e SQL Server pois não há nenhuma específica para jQuery, desculpa..
Guilherme Silva
Posts
18/06/2015
Randrade
Para fazer isso, você cria um select com os dados estáticos e no outro buscando os dados de acordo com o parâmetro. Um exemplo seria assim:
<label class="page1">Country</label> <div class="tooltips" title="Please select the country that the customer will primarily be served from"> <select id="country" name="country" placeholder="Phantasyland"> <option></option> <option>Germany</option> <option>Spain</option> <option>Hungary</option> <option>USA</option> <option>Mexico</option> <option>South Africa</option> <option>China</option> <option>Russia</option> </select> </div> <br /> <br /> <label class="page1">Location</label> <div class="tooltips" title="Please select the city that the customer is primarily to be served from."> <select id="location" name="location" placeholder="Anycity"></select> </div>
E no JQuery, você preenche o segundo select, com o evento do primeiro, ficando assim:
jQuery(function($) { var locations = { 'Germany': ['Duesseldorf', 'Leinfelden-Echterdingen', 'Eschborn'], 'Spain': ['Barcelona'], 'Hungary': ['Pecs'], 'USA': ['Downers Grove'], 'Mexico': ['Puebla'], 'South Africa': ['Midrand'], 'China': ['Beijing'], 'Russia': ['St. Petersburg'], } var $locations = $('#location'); $('#country').change(function () { var country = $(this).val(), lcns = locations[country] || []; var html = $.map(lcns, function(lcn){ return '<option value="' + lcn + '">' + lcn + '</option>' }).join(''); $locations.html(html) }); });
Olha o exemplo funcionando neste link.
Lembrando que você pode utilizar ajax e ler de um WS JSON, ou outra fonte.
18/06/2015
Guilherme Silva
Legal, eu já tinha visto este link.. Mas não quero trocar o que vai dentro do option do segundo select, e sim o value dele!
<option value="cafe"> se selecionar sintetico no primeiro select, ficaria <option value="rcafe">
Entende?
Só preciso que fique um R adicionado ao início do value, apenas isso.. Hoje eu fiz assim (Não funcionou ainda, não manjo de jQuery):
<script type="text/javascript"> $(document).ready(function () { $("#select-primeiro").bind("change", function () { if ($(this).val() == "analitico") { $("#select-segundo option").each(function () { $(this).val($(this).data("option")); }); } else if ($(this).val() == "sintetico") { $("#select-segundo option value").each(function () { $(this).val("r" + $(this).data("option")); }); } }); }); </script>
Clique aqui para fazer login e interagir na Comunidade :)