Onclick in a select option

Asked

Viewed 12,947 times

4

I’m using a select. I want the last option call another page.

<select>
  <option>Teste1</option>
  <option>Teste2</option>
  <option onclick="page.htm">Pagina</option>
</select>

That is possible?

javascript html
  • 3

    It is not possible this way, the ideal is to check the value in onChance() or count the total options and then redirect.

  • Thought faster, huh, @rray

3 answers

5


I suggest adding something to the element that indicates this extra functionality if only this element/option has a url.

You can always have something like

if (this.value == 'Pagina') window.location = 'page.htm';

but this semantically is not very correct. It would be best to join a data element and use onchange.

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

In this case the HTML would have <option data-url="/page.htm">Pagina</option>.

Example: http://jsbin.com/weyupugubu/1/

4

I believe what you’re trying to do is a onChange, and not a onClick. At least I’ve never seen click event working for select or option.

You can do it like this:

document.querySelector('select').addEventListener('change', function(){

    document.location.href = this.value;
});

See working on JSFIDDLE

  • the onclick works in select, although the onchange has a better functioning, in option nay

  • The difference is that the change not only evaluates the selection, but that the current value is changed. Selecting it option already selected, nothing happens with onChange

  • Correction: No addEventListener is not used onChange, and yes change

3

If only at the last value to redirect and if it dynamical form can do so:

<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>

  • It wouldn’t be easier just to check the value of the option? EDIT A ta, now I understand, dynamic combo

  • this.value would already solve the problem, no, @rray? Because instead of you call as onchange="redirecionar(this)" and have a parameter opc, you better use onchange="redirecionar.call(this)". So you make this in the context of the current DOM object!

  • 1

    If the combo is dynamic the last item can vary, so I opted for this code otherwise it would just pass to the function the option value.

  • @rray are the problems of reading an answer by half kkk

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.