Question

我有一个<!doctype html> <html lang="en-us"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>js-dos api</title> <style type="text/css"> .dosbox-container { width: 640px; height: 400px; } .dosbox-container > .dosbox-overlay { background: url(https://js-dos.com/cdn/digger.png); } .dosbox-start { font-size: 35px !important; } </style> </head> <body> <div id="dosbox"></div> <br/> <button onclick="dosbox.requestFullScreen();">Make fullscreen</button> <script type="text/javascript" src="https://js-dos.com/cdn/js-dos-api.js"></script> <script type="text/javascript"> var dosbox = new Dosbox({ id: "dosbox", onload: function (dosbox) { dosbox.run("https://js-dos.com/cdn/digger.zip", "./DIGGER.COM"); }, onrun: function (dosbox, app) { console.log("App '" + app + "' is runned"); } }); var dosboxId = document.getElementById('dosbox'); dbChild = dosboxId.childNodes; dbGranChild = dbChild[0].childNodes; console.log(dbGranChild[0]) </script> </body> </html>我从数据库填充。我希望能够通过显示包含该项目选项的上下文菜单，右键单击任何一个项目并删除或编辑该项目。关于如何做到这一点或是否有可能的任何想法？

Answer 1

正如@ freedomn-m指出的那样，你需要制作自己的下拉列表。

例如，您可以执行以下操作：

添加一些 html 来保存下拉列表：

<button id='dog_button'>Dogs</button>
<div id='hold'></div>

为样式添加一些 CSS ：

body {
  font-family: arial; 
}

button {
  width: 200px;
  height: 40px;
  border: none; 
  border-radius: 3px;
  font-size: 17px;
  font-weight: bold;
  background: gold; 
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  cursor: pointer;
  outline: 0;
}

.show {
  width: 180px;
  display: inline-block;
  background: #dedede;
  padding: 10px;
}

.square {
  border: 1px solid black;
  width: 20px;
  height: 20px;
  text-align: center;
  float: right;
  padding-top: 3px;
  cursor: pointer;
}

.ops {
  cursor: pointer;
}

使用 jQuery 填充下拉列表，并根据需要添加ID。当右键单击您的选择选项时，使用甜蜜提醒来处理弹出式选项：

categories_and_ops = {
    'Dog Beds' : ['Soft Dog Beds','Matress Dog Beds','Plastic Dog Beds','3 Peaks','Dog Blankets','Heating Dog Beds', 'Specific Dog Beds', 'Luxury Dog Beds'],
    'Dog Coats' : ['...','...','...','...','...','...', '...', '...']
}

$('#dog_button').click(function() {
$.each(categories_and_ops, function(cat, op) {
  div_id = 'div_' + Math.floor(Math.random() * 6);
  $('#hold').append("<div class='show' id=" + div_id + "></div><br>")
  $('#' + div_id).append("<span style='color:orange; font-weight: bold'>" + cat + "</span><div class='square'>-</div><br>" + '<br>') 
  op.forEach(function(op_elem) { 
  op_id = 'op_' + Math.floor(Math.random() * 100000); $('#' + div_id).append('&nbsp;&nbsp;&nbsp;' + "<span id=" + op_id + " class='ops'>" + op_elem + "</span>" + '<br><br>');
  $('#' + op_id).contextmenu(function() { delete_edit(); return false;    });
  })
  })
  })

$(document).on('mouseover', '.ops', function() { $(this).css('background', 'grey') })
$(document).on('mouseleave', '.ops', function() { $(this).css('background', '#dedede') })

$(document).on('click', '.square', function() {
if($(this).html() == '-') {
  $(this).parent().children('.ops').toggle();
  $(this).html('+');
  } else {
  $(this).parent().children('.ops').toggle();
  $(this).html('-');
  }
  })

function delete_edit() {
    swal({
    html: "<button id='del_button'>DELETE</button><br><br><button id='edit_button'>EDIT</button>",
    showConfirmButton : false
    }).catch(swal.noop)
    }

$(document).on('click', '#del_button', function() {
    alert('DELETED!')
})

$(document).on('click', '#edit_button', function() {
    alert('ADD YOUR EDIT CODE!')
})

结果：

以下是JSFIDDLE

如何在右键单击DropDownList项目时创建上下文菜单？

1 个答案: