kurze Werte von gewählten Optionen in Mehrfachauswahl

Question

Anzeigen unter ich einige Stück Code von https://semantic-ui.com/modules/dropdown.html angehängt: (Multiple Selection)

<select name="skills" multiple="" class="ui fluid dropdown"> 
    <option value="">Skills</option> 
    <option value="angular">Angular</option> 
    <option value="css">CSS</option> 
    <option value="design">Graphic Design</option> 
    <option value="ember">Ember</option> 
    <option value="html">HTML</option> 
    <option value="ia">Information Architecture</option> 
    <option value="javascript">Javascript</option> 
    <option value="mech">Mechanical Engineering</option> 
    <option value="meteor">Meteor</option> 
    <option value="node">NodeJS</option> 
    <option value="plumbing">Plumbing</option> 
    <option value="python">Python</option> 
    <option value="rails">Rails</option> 
    <option value="react">React</option> 
    <option value="repair">Kitchen Repair</option> 
    <option value="ruby">Ruby</option> 
    <option value="ui">UI Design</option> 
    <option value="ux">User Experience</option> 
</select> 

Die Frage ist:
Ist es möglich, kurze Namen der gewählten Optionen zu zeigen, ? Ich meine, so etwas wie:
Optionen sind: keyboard, mouse, monitor, laptop
Nach keyboard, mouse chosing Optionen angezeigt werden: K, M

Ist es möglich, es zu tun?

Answer 1

Ich bin nicht vertraut mit eckigen oder semantischen, aber es ist ziemlich einfach mit vanilaJS. Sie können diesen Code gerne auf der semantic-ui Website testen. Wählen Sie, um Elemente in dem Multi-Select-Abschnitt führen Sie diese in der Konsole:

var items = document.querySelectorAll(".ui.label.transition.visible"); 
items.forEach(function(item){ 
    var icon = document.createElement("i"); 
    icon.className = "delete icon"; 
    item.innerText = item.innerText[0]; 
    item.appendChild(icon); 
}); 

Sicher, es zu benutzen mit Winkel Sie möchte meinen Code ändern, aber das ist ein möglicher Ansatz.