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

我有一个从数据库填充的

asp:DropDownList

。我希望能够右键单击任何一个项目，并通过显示带有这些项目选项的上下文菜单来删除或编辑该项目。关于如何做到这一点，或者如果可能的话，你有什么想法吗？

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

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

添加一些html以保留下拉列表：

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

使用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!')
})

类别和操作={
“狗床”:[“软狗床”、“床垫狗床”、“塑料狗床”、“三峰”、“狗毯”、“加热狗床”、“特殊狗床”、“豪华狗床”]，
“狗大衣”：[“…”、“…”、“…”、“…”、“…”、“…”、“…”、“…”、“…”]
}
$（“#dog_按钮”）。单击（函数（）{
$。每个（类别和操作，功能（类别，操作）{
div_id='div_'+Math.floor（Math.random（）*6）；
$（'#hold'）。追加（
）
$（“#”+div_id）.append（“+cat+”-
“+”
”）
op.forEach（函数（op_元素）{
op_id='op_'+Math.floor（Math.random（）*100000）；$（'#'+div_id）.append（'+'+op_elem++'

'）；
$（'#'+op_id）.contextmenu（函数（）{delete_edit（）；返回false；}）；
})
})
})
$（document）.on（'mouseover'，'.ops'，function（）{$（this.css（'background'，'grey'）}）
$（document）.on（'mouseleave'，'.ops'，function（）{$（this.css（'background'，'dededede'）}）
$（文档）.on（'单击'，'.square'，函数（）{
如果（$（this.html（）='-'））{
$（this.parent（）.children（'.ops'）.toggle（）；
$（this.html（'+'）；
}否则{
$（this.parent（）.children（'.ops'）.toggle（）；
$（this.html（'-'）；
}
})
函数delete_edit（）{
游泳({
html：“删除

编辑”，
showconfixton：false
}).catch（swal.noop）
}
$（文档）。在（'单击'，'删除按钮'，函数（）上）{
警报（'已删除！'）
})
$（文档）。在（'单击'，'编辑按钮'，函数（）上）{
警报（'添加编辑代码！'）
})

结果：

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!')
})

---

下面是@freedomn-m指出的

，您需要创建自己的下拉列表

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

添加一些html以保留下拉列表：

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

使用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!')
})

类别和操作={
“狗床”:[“软狗床”、“床垫狗床”、“塑料狗床”、“三峰”、“狗毯”、“加热狗床”、“特殊狗床”、“豪华狗床”]，
“狗大衣”：[“…”、“…”、“…”、“…”、“…”、“…”、“…”、“…”、“…”]
}
$（“#dog_按钮”）。单击（函数（）{
$。每个（类别和操作，功能（类别，操作）{
div_id='div_'+Math.floor（Math.random（）*6）；
$（'#hold'）。追加（
）
$（“#”+div_id）.append（“+cat+”-
“+”
”）
op.forEach（函数（op_元素）{
op_id='op_'+Math.floor（Math.random（）*100000）；$（'#'+div_id）.append（'+'+op_elem++'

'）；
$（'#'+op_id）.contextmenu（函数（）{delete_edit（）；返回false；}）；
})
})
})
$（document）.on（'mouseover'，'.ops'，function（）{$（this.css（'background'，'grey'）}）
$（document）.on（'mouseleave'，'.ops'，function（）{$（this.css（'background'，'dededede'）}）
$（文档）.on（'单击'，'.square'，函数（）{
如果（$（this.html（）='-'））{
$（this.parent（）.children（'.ops'）.toggle（）；
$（this.html（'+'）；
}否则{
$（this.parent（）.children（'.ops'）.toggle（）；
$（this.html（'-'）；
}
})
函数delete_edit（）{
游泳({
html：“删除

编辑”，
showconfixton：false
}).catch（swal.noop）
}
$（文档）。在（'单击'，'删除按钮'，函数（）上）{
警报（'已删除！'）
})
$（文档）。在（'单击'，'编辑按钮'，函数（）上）{
警报（'添加编辑代码！'）
})

结果：

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!')
})

---

下面是asp:DropDownList创建一个完全由浏览器处理的

。使用此机制无法实现您的请求。您必须模拟您自己的下拉列表，您将完全控制该列表，然后可以添加上下文菜单并轻松添加/删除项目。您可能希望从现有插件开始，而不是从头开始。您可以使用按键事件处理程序来删除或编辑下拉列表中的选定项。

asp:DropDownList

创建一个完全由浏览器处理的

。使用此机制无法实现您的请求。您必须模拟您自己的下拉列表，您将完全控制该列表，然后可以添加上下文菜单并轻松添加/删除项目。您可能希望从现有插件开始，而不是从头开始。您可以使用按键事件处理程序来删除或编辑下拉列表中的选定项目。非常直观和完整的答案，谢谢！我会试试这个，现在，我会把这个标记为答案非常直观和完整的答案，谢谢！我会试试这个，现在，我会把这个标记为答案