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