Quiero mostrar el valor de la opción desplegable cuando hago clic derecho en cualquier opción. En el momento en que hago clic derecho en la opción, simplemente selecciona la opción y cierra el menú desplegable en lugar de llamar al método getCountryName y mostrarlo en la alerta.
¿Podría por favor ayudarme a lograr esto?
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>Puede usar un menú desplegable personalizado para resolver su problema. Estoy usando Bootstrap para demostrar
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>Esto no es posible utilizando los elementos de selección y opción de HTML. Puede crear un menú desplegable personalizado, por ejemplo, como se muestra en w3schools.com y luego agregar los eventos oncontextmenu allí.