如何在 select 选项 javascript/jquery 中显示上下文菜单？

Question

我想在右键单击任何选项时显示下拉选项值。 当我右键单击该选项时，它只是选择该选项并关闭下拉列表，而不是调用getCountryName方法并将其显示在警报中。

你能帮我实现这个目标吗？

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>

Answer 1

您可以使用自定义下拉菜单来解决您的问题，我正在使用引导程序进行演示

 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>

Answer 2

使用 HTML select 和选项元素是不可能的。 您可以创建一个自定义下拉菜单，例如w3schools.com上演示的那样，然后在那里添加 oncontextmenu 事件。

如何在 select 选项 javascript/jquery 中显示上下文菜单？

问题描述

2 个解决方案

解决方案1
2 2022-03-18 11:22:24

解决方案2
1 2022-03-18 11:51:01

如何在 select 选项 javascript/jquery 中显示上下文菜单？

问题描述

2 个解决方案

解决方案1 2 2022-03-18 11:22:24

解决方案2 1 2022-03-18 11:51:01

解决方案1
2 2022-03-18 11:22:24

解决方案2
1 2022-03-18 11:51:01