1

Preciso fazer uma página semelhante a esta onde eu faço o orçamento de um computador.

O ultimo produto do orçamento da ChipArt é o gabinete, o site deles tem uma opção de abrir uma galeria de imagens e selecionar qual gabinete eu quero, como fazer essa seleção e atualizar o 'select' com a opção que foi selecionada?

1
  • 1
    Não coloque resolvido no título, aceite(marque ela com um V) uma das respostas a qual você mais gostou ou a que resolveu o problema. Se tiver algum dúvida pode consultar como aceitar uma resposta
    – rray
    Commented 10/10/2014 às 15:14

3 Respostas 3

0

Você pode usar o attributo selected do option para definir qual estará selecionado. Veja um exemplo

http://jsbin.com/fogobivaduxo/1/edit?html,output

html:

<ul id="selector">
  <li><a href="#" data-target="o1">select 1</a></li>
  <li><a href="#" data-target="o2">select 2</a></li>
  <li><a href="#" data-target="o3">select 3</a></li>
</ul>

<select id="s">
  <option></option>
  <option id="o1">1</option>
  <option id="o2">2</option>
  <option id="o3">3</option>
</select>

Javascript:

$('#selector a').click(function() {
  $("#s").find("#" + $(this).data("target")).attr("selected", true);
});
0

Você pode colocar um atributo no li com o valor da opção e adicionar um evento onclick, quando o usuário clicar no li você seleciona a opção no select, veja o exemplo:

JSFiddle

HTML

<select name="opcao" id="sel-opcao">
    <option>Selecione</option>
    <option value="1">Opção 1</option>
    <option value="2">Opção 2</option>
    <option value="3">Opção 3</option>
</select>

<ul id="lista-opcao">
    <li data-value="1">Opção 1</li>
    <li data-value="2">Opção 2</li>
    <li data-value="3">Opção 3</li>
</ul>

jQuery

$('#lista-opcao li').click(function(){
    var id = $(this).attr('data-value');
    $('#sel-opcao option').filter('[value="'+id+'"]')
                          .prop('selected', true);
});
0

Coloque o valor dos options em um atributo do li, e atualize o valor do select com o método val do jQuery:

JSFiddle

HTML

<select name="itens" id="itens">
    <option value="1">Gabinete 1</option>
    <option value="2">Gabinete 2</option>
    <option value="3">Gabinete 3</option>
    <option value="4">Gabinete 4</option>
    <option value="5">Gabinete 5</option>
</select>
<hr>
<ul id="escolher">
    <li data-iten="1">Gabinete 1</li>
    <li data-iten="2">Gabinete 2</li>
    <li data-iten="3">Gabinete 3</li>
    <li data-iten="4">Gabinete 4</li>
    <li data-iten="5">Gabinete 5</li>
</ul>

jQuery

$('#escolher li').click(function(){
    valor = $(this).attr('data-iten');
    $('#itens').val(valor);
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .