2016-06-15 8 views
0

Ich benutze Textbox, um Städte Namen zu Listbox zusammen mit Städten Namen hinzufügen, die ich hinzufügen schließen Schaltfläche hinzufügen, so kann ich Städtenamen aus Listbox leicht entfernen.
unten Bild ist für eine bessere enter image description hereHinzufügen von Schließen Schaltfläche in Listbox

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

+0

Bieten Sie eine Geige! –

+0

@TeutaKoraqi: Ich habe meinen JQuey Code – Sri

+0

hinzugefügt Ich kann nicht helfen, wenn Sie keine Geige bieten. Ich muss die ganze Funktionalität sehen, die du in einer Geige gemacht hast! –

Antwort

1

Ich entfernte Option wählen zu verstehen, cus Sie Taste auf Option löschen nicht hinzufügen können. Werfen Sie einen Blick, wenn Sie, dies zu tun versuchten:

$("#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>

+0

Schließen Sie die Schaltfläche nicht funktioniert – Sri

+0

Sorry, cus Ich dachte, Sie suchten nur nach dem Button, nicht seine Funktionalität. Ich habe mein Snippet bearbeitet. Viel Glück! :) –

0

Dieser Ausschnitt ist Arbeit für mich :)

$(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(); 
    }); 
}); 

});

Verwandte Themen