jQuery Select substituição do menu
-
10-07-2019 - |
Pergunta
Eu tenho um select drop-down que seleciona um tema para a página atual que o usuário está em:
<select id="style" name="acct-stylenum">
<option value="1" selected="true">Light</option>
<option value="2">Dark</option>
</select>
Agora, o que eu gostaria de fazer é adicionar duas divs que também controlam este seleto menu. Eu prefiro muito mais que o usuário escolha entre duas imagens do que um menu de seleção. Os divs são os seguintes:
<div class="style-box light"></div>
<div class="style-box dark"></div>
Eu gostaria de usar jQuery para tornar o menu de seleção escondido, mas ainda usam sua entrada. Também eu gostaria que os divs para controlar o valor menus e mostrar um estado selecionado. Por favor, deixe-me saber a maneira mais fácil isso pode ser feito usando jQuery ou JavaScript.
Agradecemos antecipadamente.
-B
Solução
Se você tem todas as imagens na mesma ordem que as opções na escolha que você poderia então algo como isto (assumindo que a versão jQuery> = 1,3 e <1,4 porque índice agora faz o que deveria)
$("div.style-box").live('click', function() {
//get index of div clicked
var index = $(this).prevAll().length;
//select the corresponding option in the hidden select
$('#style>option').eq(index).attr('selected', true);
});
Outras dicas
Usando este plugin: http://dev.jquery.com/browser/trunk / encaixes / selectboxes Você pode fazer isso:
$("#style-box-light").click(function() {
$("#style").selectOptions("1");
});