Wie können Tags dynamisch auf einer Webseite angezeigt werden?

Question

Wie erhalte ich den Inhalt eines ausgewählten Kontrollkästchens und zeige es als Tag an? (Wie in E-Commerce-Websites angezeigt, wenn ein Filter ausgewählt)

ich das ausgewählte Kontrollkästchen als Tag (Bsp. Materialise CSS Chips)

Answer 1

um die Tags anzuzeigen, fügt div Element und gibt eine ID an das Element darauf verweisen später verwenden kann:

<div id="chip_displayed"></div> 

Jetzt, wenn ein che ckbox ist ausgewählt, rufen Sie die Funktion auf, um den ausgewählten Wert zu lesen.

$(document.body).on('change', 'input[type="checkbox"]', function(){ 
    display(); 
}); 

display() wird die ‚id‘ der ausgewählten Werte lesen und ‚name‘ Parameter und fügen hinzu, dass auf die Materialise CSS bekommen als Tag angezeigt werden soll.

function display() 
{ 
    document.getElementById("chip_displayed").innerHTML = ""; 

    var checked_ids = $('input:checkbox').filter(":checked").map(function() { 
     return this.id; 
    }).get(); 

    for(var i=0; checked_ids[i] ;i++) 
    { 
     var name = $('#'+checked_ids[i]).attr('name'); 
     document.getElementById("chip_displayed").innerHTML += "<div class='chip teal lighten-3' id='chip1'>"+name+"<i class='material-icons chip_close' id='close_chip1'>close</i></div>"; 
    } 
} 

Answer 2

Materialise Stichworte ist eine moderne jQuery-Plugin verwendet, angezeigt werden soll eine erstellen gut aussehendes Material Design-Stil-Tag-Manager Materialise framework.You it.check here