how to display contextmenu in select option javascript/jquery?

Question

I want to display the dropdown option value when I right-click on any option. At the moment when I right-click on the option, it simply selects the option and closes the dropdown instead of calling the getCountryName method and displaying it in the alert.

Could you please help me to achieve this?

HTML

<select id="ddlCountry">
        <option val="Sweden" oncontextmenu="getCountryName(this); return false;">Sweden</option>
        <option val="Denmark" oncontextmenu="getCountryName(this); return false;">Denmark</option>
        <option val="Germany" oncontextmenu="getCountryName(this); return false;">Germany</option>
        <option val="France" oncontextmenu="getCountryName(this); return false;">France</option>
</select>

Javascript

<script type="text/javascript">
    function getCountryName(t) {
        alert(t.value);       
    }
</script>

Sounds like a terrible idea. This goes against any common expectation the average user will have, how select fields work. — CBroe, Mar 18 '22 at 11:31
I think this is not possible, at least not across browsers. In Firefox a right-click on the opened options list of a select element [doesn't trigger any events](https://jsfiddle.net/vq2n59hy/), not even an event in capture mode attached to a wrapper of the select element, or the to the select element itself. — Teemu, Mar 18 '22 at 11:34
did you look this? https://stackoverflow.com/questions/4909167/how-to-add-a-custom-right-click-menu-to-a-webpage — Tayfun Yuksel, Mar 18 '22 at 12:16

mmh4all · Answer 1 · 2022-03-18T12:11:08.770

You can use a custom dropdown menu to solve your problem am using bootstrap to demonstrate

function getCountryName(t) {
  alert(t.getAttribute("data-value"));       
}
//Prevent default behaviour
window.addEventListener("contextmenu", e => e.preventDefault());

li:hover {
    background: rgb(189, 189, 247);
}

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"  integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
      Country
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
      <li oncontextmenu="getCountryName(this)" data-value="Sweden">Sweden</li>
      <li oncontextmenu="getCountryName(this)" data-value="Denmark">Denmark</li>
      <li oncontextmenu="getCountryName(this)" data-value="Germany">Germany</li>
      <li oncontextmenu="getCountryName(this)" data-value="France">France</li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>

It was my downvote. Now upvoted. – www.admiraalit.nl Mar 18 '22 at 12:35 — www.admiraalit.nl, Mar 18 '22 at 12:35

score 1 · Answer 2 · answered Mar 18 '22 at 11:51

1

This is not possible using the HTML select and option elements. You could create a custom dropdown, e.g. as demonstrated on w3schools.com and then add the oncontextmenu events there.

answered Mar 18 '22 at 11:51

www.admiraalit.nl

5,768
1
17
32

how to display contextmenu in select option javascript/jquery?

2 Answers2