如何覆盖HTML select标签的onclick事件？

Question

我已覆盖我的选择代码上的click事件。 当我单击我的选择标记作为默认标记时，将显示选项列表。 但是，当我单击选择标记时，我必须自定义该列表并做其他工作。

我该如何实现？

请看下面的代码：

<!DOCTYPE html>
<html>
    <body>
        <select id="selectId">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="opel">Opel</option>
            <option value="audi">Audi</option>
        </select>
        <script>
            document.getElementById("selectId").onclick = function () {
                alert("second event");
            }
        </script>
    </body>
</html>

这两个事件都被解雇了，但是我只想要第二个事件。

Answer 1

您无法覆盖select元素onClick因为它没有一个。 当您单击一个select ，浏览器会用您无法调和的魔法来处理它。 您也无法模拟点击。

您只能对选择执行的操作是：

更改其size属性。 您可以将其更改为1以强制将其关闭，但是您会看到难看的闪烁。
将所有子option元素的hidden属性设置为true

您可以伪造它，如下所示：

http://jsfiddle.net/BupuU/3/

HTML：

<div class="wrapper">
    <select id="selectId" size="2" multiple="true">
      <option value="volvo" hidden="true">Volvo</option>
      <option value="saab"  hidden="true">Saab</option>
      <option value="opel"  hidden="true">Opel</option>
      <option value="audi"  hidden="true">Audi</option>
    </select>
    <div class="mask">Volvo</div>
</div>

使用Javascript：

$('.wrapper').click( function(event){
    console.log("sdsd");
    if(true){
       $('#selectId').show();
        $(".mask").hide();
    }
    event.stopPropagation();

});

$('body').click(function(){
    $('#selectId').hide();
    $(".mask").show();
});

CSS：

.mask{
    position:absolute;
    top:0;
    width:100%;
    height:100%;
    text-align:center;
}

.wrapper{
    position:relative;
    display:inline-block;
    min-height:23px;
    min-width:62px;
    vertical-align:top; overflow:hidden; border:solid grey 1px;
}

#selectId{
    display:none;
    padding:20px;
    margin:-18px -30px -18px -8px;
}

这仅仅是一个起点。 您可以从这里构建。

如何覆盖HTML select标签的onclick事件？

问题描述

1 个解决方案

解决方案1
4 已采纳 2014-05-07 10:58:37

如何覆盖HTML select标签的onclick事件？

问题描述

1 个解决方案

解决方案1 4 已采纳 2014-05-07 10:58:37

解决方案1
4 已采纳 2014-05-07 10:58:37