HTML Select样式

Question

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>
    </select>
</form>

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?

Answer 1

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);'>

<script>
function getrow(no) {
    if (no!='')
        location.href = 'table.php?row='+no;
}
</script>