我有一个asp:DropDownList
我从数据库中填充的。我希望能够右键单击任何一项,并通过显示包含该项目那些选项的上下文菜单来删除或编辑该项目。关于如何执行此操作或是否可行的任何想法?
正如@ 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(' ' + "<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
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句