how to display contextmenu in select option javascript/jquery?-CodePudding

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>

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css"  integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
  <div >
    <button  type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
      Country
    </button>
    <ul  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/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u LWgxfKTRIcfu0JTxR EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>

CodePudding user response：

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.