HTML 选择样式答案

【问题标题】：HTML Select styledHTML 选择样式
【发布时间】：2012-10-17 04:40:01
【问题描述】：

我有这个按钮，它应该转到值中的页面，但是当我有 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”不起作用？

【问题讨论】：

也许我应该添加更多“选项”，希望你能明白:)
尝试删除单个样式规则，直到它再次开始工作，以确定哪个规则违反了它。请记住，<select> 元素由于是外部表单组件，因此基本上无法设置样式，因此如果您希望它更好地适应您的主题，您最好为它创建自己的替代品。
确实把样式一一去掉了，是因为类在select标签里就坏了
页面上可能还有其他内容存在冲突。你在课堂上有一个事件监听器吗？您是否让 PHP 或其他语言将上述 HTML 输出到页面？也许你需要逃避你的报价。上面的代码应该可以正常工作。
如果你继续使用 Javascript 的复数形式，是的。

标签： html css select styles onchange

【解决方案1】：

无论样式如何，这都不起作用，因为select 只有一个option，默认情况下是选中的。当您再次尝试选择它时，select 中的值没有变化，因此不会触发 onchange 事件。

有两种方法可以做到这一点：

将虚拟option 添加到select (<option value=''>---</option>)
将onchange 更改为onblur 事件。

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

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

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

【讨论】：