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

为什么" on Change"不起作用？

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>