[英]How to add Close Button in Listbox
I'm using Textbox to add cities name to Listbox along with cities name i want to add close button, so i can remove cities names from listbox easily. 我正在使用文本框将城市名称以及我想添加关闭按钮的城市名称添加到列表框中,因此我可以轻松地从列表框中删除城市名称。
below image is for better understand 下面的图像是为了更好地理解
HTML 的HTML
<asp:TextBox ID="txtcity" runat="Server"></asp:TextBox>
<asp:Button ID="btnAddcity" runat="server" Text="Add" />
<asp:ListBox ID="listBoxcity" runat="server"></asp:ListBox>
<span id="spcity"></span>
JQuery jQuery查询
$("#btnAddcity").click(function () {
var txt = $("#txtcity").val();
$('[id$=listBoxcity]').show();
var alreadyExist = false;
$('[id$=listBoxcity] option').each(function () {
if ($(this).val() == txt) {
$("#spcity").text('City alread exists');
alreadyExist = true;
return;
}
});
if (!alreadyExist) {
$('[id$=listBoxcity]').append($('<option></option>').attr('value', txt).text(txt));
}
});
I removed option select, cus you cannot add delete button on option. 我删除了选项选择,因为您不能在选项上添加删除按钮。 Just take a look if you were trying to do this: 如果您尝试执行此操作,请看一下:
$("#btnAddcity").click(function () { var txt = $("#txtcity").val(); $('[id$=listBoxcity]').show(); var alreadyExist = false; $('[id$=listBoxcity] option').each(function () { if ($(this).val() == txt) { $("#spcity").text('City alread exists'); alreadyExist = true; return; } }); if (!alreadyExist) { $('[id$=listBoxcity]').append($('<span></span>').attr('value', txt).text(txt)); $('[id$=listBoxcity]').append($('<a href="#" class="delete">x</a><br>')); } }); $(document).on('click', 'a.delete', function(event){ $(this).prev('span').remove(); $(this).next('br').remove(); $(this).remove(); });
a.delete { margin-left: 10px; width: 20px; height: 20px; background: #82854C; border-radius: 100%; text-align: center; display: inline-block; color: #fff; vertical-align: middle; text-decoration: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <table> <tr> <td><input id='txtcity' type="text" /></td> <td><input id='btnAddcity' type='button' value='Add' /></td> </tr> </table> <!-- <select id='listBoxcity' multiple="multiple" style='width:300px; height:100px;'> </select> --> <div id='listBoxcity' multiple="multiple" style='width:300px; height:100px;'> </div> <span id='spcity'></span>
This snippet is work for me :) 这个片段是对我工作:)
$(document).ready(function(){
$("#btnAddcity").click(function () {
var txt = $("#txtcity").val();
$('[id$=listBoxcity]').show();
var alreadyExist = false;
$('[id$=listBoxcity] option').each(function () {
if ($(this).val() == txt) {
$("#spcity").text('City alread exists');
alreadyExist = true;
return;
}
});
var count = 0;
if (!alreadyExist) {
count++;
$('[id$=listBoxcity]').append($('<span></span>').attr('value', txt).text(txt));
$('[id$=listBoxcity]').append($('<div class="delete">x</div><br>'));
}
$('.delete').on('click',function(e){
console.log($(this).closest('span'));
$(this).next('br').remove();
$(this).prev('span').remove();
$(this).remove();
});
});
}); });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.