Alterar value do <option> com jQuery

17/06/2015

0

Pessoal, boa tarde!

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

Guilherme Silva

Responder

Posts

18/06/2015

Randrade

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:

<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.
Responder

18/06/2015

Guilherme Silva

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

<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>
Responder

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar