Question

我确实搜索了如何创建在页面中任意位置单击时显示的选项列表弹出窗口（当我们在页面上的任意位置单击时，选项列表如鼠标右键单击弹出菜单一样弹出）像这个例子一样使用jQuery：

最后，我确实找到了 jQuery contextMenu 的解决方案这是解决方案：

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.contextMenu.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.7.1/jquery.ui.position.js"></script>
</head>
<body class="context-menu-one">

    <script>
            $(function() {
                $.contextMenu({
                    selector: '.context-menu-one', 
                    callback: function(key, options) {
                        var m = "clicked: " + key;
                        window.console && console.log(m) || alert(m); 
                     },
                items: {
                   "Home": {name: "Home", icon: "Home"},
                   "About": {name: "About", icon: "About"},
                   "Contact": {name: "Contact", icon: "Contact"},
                   "quit": {name: "Quit", icon: function(){
                         return 'context-menu-icon context-menu-icon-quit';
                     }}
                }
            });

            $('.context-menu-one').on('click', function(e){
                console.log('clicked', this);
            })    
        });
    </script>
    just right click
</body>
</html>

Answer 1

您的问题非常模糊。我假设您要动态构建一个组合框，并用预设值填充它，并将其附加到页面中的某些元素上。这是一种方法。

$('#btn').click(function(){
  var combo = $("<select />");
  var options = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
  
  for(var i=0; i<options.length; i++) {
    var option = $("<option />").val(i).html(options[i]);
    
    combo.append(option);
  }
  
  $('#result').append(combo);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<div id="result"></div>

<button id="btn">Create Drop-Down List</button>

如何使用jQuery单击创建选项列表弹出窗口

1 个答案: