Create a specific menu right click on a html select option

Question

I would need to create a html select where, if a option is selected clicking the right button, a new popup is shown with some options. It is important the options aren't hidden when the user clicks on the right button (so I can't use onchange or onclick).

I have tried also to use onclick on the options but doesn't work on Chrome.

Any idea? Thank you!

do your homework :) http://stackoverflow.com/questions/4495626/making-custom-right-click-context-menus-for-my-web-app... and many-many more solutions can be found on the net... — benomatis, Oct 15 '14 at 15:37
Thank you so much! I had to modified the plugin a little bit. Honestly I searched on the Internet but I couldn't find anything useful... And I didn't come across this post — user1516059, Oct 16 '14 at 13:54

DividedByZero · Answer 1 · 2014-10-17T20:52:32.230

Have you tried oncontextmenu?
Assuming element is the element that will be right clicked:

document.body.addEventListener('click', function() {
  document.getElementById("rightclicked").style.display = "none";
})
document.body.addEventListener('contextmenu', function() {
  document.getElementById("rightclicked").style.display = "none";
})
document.getElementById("element").addEventListener('contextmenu', function(ev) {
  ev.stopPropagation();
  ev.preventDefault();
  rightclick();
  return false;
}, false);

function rightclick() {
  var e = window.event;
  var cantThinkOfAName = document.getElementById("rightclicked");
  cantThinkOfAName.style.display = "block";
  cantThinkOfAName.style.left = e.clientX + "px";
  cantThinkOfAName.style.top = e.clientY + "px";
}

<div id="element">right click</div>
<div id="rightclicked" style="background-color: rgb(200, 200, 200);z-index: 100000; width:150px;height: auto; position: absolute; display: none;">
  <ul style="margin: 0px; padding: 0px; text-align: center; list-style-type: none; text-indent: 0px">
    <a href="#">
      <li style="border-top: none; margin-top: -1px">
        <p>Item1</p>
      </li>
    </a>
    <a href="#">
      <li>
        <p>Item2</p>
      </li>
    </a>
    <a href="#">
      <li>
        <p>Item3</p>
      </li>
    </a>
    <a href="#">
      <li style="margin-bottom: 1px;">
        <p>Item4</p>
      </li>
    </a>
  </ul>
</div>

It is a bit more complex on a select tag as when you click it, all elements are compressed. Anyway, thank you! — user1516059, Oct 16 '14 at 13:57
@user1516059 for that you would set the context menu position property to `position:absolute;` that way it won't affect the layout when shown — DividedByZero, Oct 16 '14 at 14:29
@user1516059 I have provided a complete context menu above, just change some css if you want — DividedByZero, Oct 16 '14 at 15:16

Create a specific menu right click on a html select option

1 Answers1