HTML 选择样式

Question

我有这个按钮，它应该转到值中的页面，但是当我有 css 时它不会，没有它可以工作，但看起来很糟糕:

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

还有这个 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;
}

为什么“Onchange”不起作用？

Answer 1

无论样式如何，这都行不通，因为 select只有一个option这是默认选择的。当您尝试再次选择它时，select 中的值没有变化。所以 onchange事件没有被触发。

实现此功能的两种方法:

1. 添加一个虚拟 option到 select ( <option value=''>---</option> )
2. 正在更改 onchange至 onblur事件。

我更喜欢第一个选项，因为它比这两个选项更明智。此外，考虑调用函数而不是使用内联 Javascript 代码。

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

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