How to change the selected option in my 'combobox' from a 'li'?

Question

I need to make a page similar to this where I budget a computer.

The last product of Chipart’s budget is the cabinet, their website has an option to open an image gallery and select which cabinet I want, how to make this selection and update 'select' with the option that was selected?

Answer 1

You can put an attribute on li with the option value and add an event onclick, when the user clicks on li you select the option on select, take the example:

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);
});

Answer 2

Put the value of options in an attribute of li, and update the value of select with the method val 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);
});

Answer 3

You can use the attributo selected option to define which will be selected. See an example

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);
});