Estou utilizando um select
. Quero que o ultimo option
chame uma outra pagina.
<select>
<option>Teste1</option>
<option>Teste2</option>
<option onclick="page.htm">Pagina</option>
</select>
Isso é possivel?
Sugiro juntar algo no elemento que indica essa funcionalidade extra caso somente esse elemento/option tenha uma url.
Podes sempre ter algo como
if (this.value == 'Pagina') window.location = 'page.htm';
mas isso semanticamente não é muito correto. O melhor seria juntar um data
no elemento e usar o onchange.
Usando onchange:
var select = document.querySelector('select');
select.addEventListener('change', function () {
var selecionada = this.options[this.selectedIndex];
var url = selecionada.getAttribute('data-url');
if (url) window.location = url;
});
Neste caso o HTML teria <option data-url="/page.htm">Pagina</option>
.
Acredito que o que você esteja querendo fazer é um onChange
, e não um onClick
. Pelo menos nunca vi evento de click funcionando para select
ou option
.
Você pode fazer assim:
document.querySelector('select').addEventListener('change', function(){
document.location.href = this.value;
});
Veja funcionando no JSFIDDLE
onclick
funciona em select
, apesar que o onchange
possui um melhor funcionamento, em option
não
Commented
12/02/2015 às 11:34
change
avalia não só a seleção, mas que o valor atual é alterado. Se selecionar o mesmo option
já selecionado, nada acontece com onChange
Commented
12/02/2015 às 11:35
addEventListener
não se usa onChange
, e sim change
Commented
12/02/2015 às 11:40
Caso se apenas no último valor para redirecionar e se ele form dinamico pode fazer dessa forma:
<html>
<head>
<script>
function redirecionar(opc){
var total_options = opc.options.length;
var option_selecionada = opc.selectedIndex;
if(total_options == option_selecionada){
location.href = opc.options[opc.selectedIndex].value;
}
}
</script>
</head>
<body>
<select id="comboBreaker" name="comboBreaker" onchange="redirecionar(this)">
<option>Teste1</option>
<option>Teste2</option>
<option>Teste3</option>
<option value="page.htm">Pagina</option>
</select>
</body>
</html>
this.value
já resolveria o problema, não, @rray? Porque, ao invés de você chamar como onchange="redirecionar(this)"
e ter um parâmetro opc
, é melhor você usar onchange="redirecionar.call(this)"
. Assim você torna o this no contexto do objeto do DOM atual!
Commented
12/02/2015 às 11:45
onChance()
ou contar o total de options e ai sim redirecionar.