Take the 2-minute tour ×

I have this button, that should go to the page in the value, but it don't when i have the css, without it works, but looks bad:

<form action="table.php" name="rows" method="POST">
    <select class="styledselect_pages" onchange="window.location.href = this.options[this.selectedIndex].value;">
    <option value="table.php?row=100">100</option>

And this CSS:

.styledselect_pages {
    background              :url(../images/table/select_number_rows.gif) left no-repeat;
    border                  :none;
    border-left             :none;
    color                   :#393939;
    cursor                  :pointer;
    display                 :block;
    font-family             :Arial;
    font-size               :12px;
    height                  :20px;
    line-height             :16px;
    margin                  :0px 0px 0px 0px;
    padding                 :4px 0 0 6px;
    text-align              :left;
    width                   :130px;

Why don't the "Onchange" not work?

share|improve this question
Maybe i should have added some more "options", hope you get it :) –  user1778037 Oct 26 '12 at 21:57
Try removing individual style rules until it starts working again, in order to identify which rule is breaking it. Bear in mind that <select> elements are basically unstylable due to being external form components, so if you want it to better fit your theme you may be better off creating your own subtitute for it. –  Niet the Dark Absol Oct 26 '12 at 21:59
Did remove the styles one by one, and it is cuz the class is in the select tag it breaks –  user1778037 Oct 26 '12 at 22:00
There's likely something else on the page that's conflicting. Do you have an event listener on the class? Are you having PHP or another language output the above HTML to the page? Maybe you need to escape your quotes. The above code as it stands should work fine. –  AlienWebguy Oct 26 '12 at 22:03
If you keep using the plural form of Javascript, yes. –  AlienWebguy Oct 26 '12 at 22:13
show 6 more comments

1 Answer

up vote 0 down vote accepted

This will not work irrespective of the style, because the select has only one option which is selected by default. When you try selecting it again, there is no change of value in the select and so the onchange event is not fired.

Two ways to make this work:

  1. Adding a dummy option to the select (<option value=''>---</option>)
  2. Changing onchange to onblur event.

I would prefer the first option because it is more sensible out of the two. Also, consider calling a function rather than having inline Javascript code.

<select onchange='javascript:getrow(this.value);'>

function getrow(no) {
    if (no!='')
        location.href = 'table.php?row='+no;
share|improve this answer
add comment

Your Answer


