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

1

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

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

    
asked by anonymous 09.10.2014 / 20:18

3 answers

0

You can use the selected attribute of the option to set which is selected. See an example

link

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);
});
    
09.10.2014 / 20:47
0

You can put an attribute in li with option value and add a onclick event, when the user clicks on li you select option on select , see 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);
});
    
09.10.2014 / 20:39
0

Set the options value to an attribute of li , and update the value of select with the val method of 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);
});
    
09.10.2014 / 20:42