Array
(
)

Alterar value do <option> com jQuery

Maca
   - 17 jun 2015

Pessoal, boa tarde!
Com base nisso aqui:
#Código
<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..

Randrade
   - 18 jun 2015

Você pode chamar os "options" do select com base no select anterior. Com pesquisas você encontra esse recurso como Cascade DropDownList.

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:

#Código<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:

#CódigojQuery(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.

Maca
   - 18 jun 2015

Randrade, boa tarde!

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):

#Código
<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>