How to override onclick event of HTML select tag?

StackOverflow https://stackoverflow.com/questions/23514790

سؤال

I have overriden the click event on my select tag. When I click on my select tag as default the option list is showing. But I have to customize that listing and do some other work when I click on select tag.

How can I achieve this?

please see below code :

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

Here both event get fired, but I want only the second event.

هل كانت مفيدة؟

المحلول

You can't override the select element onClick because it doesn't have one. When you click on a select the browser handles it with magic that you can't temper with. You can't simulate a click on it either.

The only things you can do to a select are:

  • change its size property. You can change it to 1 to force it to close, but you will see an ugly flicker.
  • set hidden property on all child option elements to true

You can fake it, something like this:

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

This is only a starting point. You can build from here.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top