Viewing short values of chosen options in multiselect

user_8820082 0
Viewed 63

below I attached some piece of code from https://semantic-ui.com/modules/dropdown.html: (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>

The question is:
Is it possible to show short names of chosen options ? I mean something like:
Options are: keyboard, mouse, monitor, laptop
After chosing options keyboard, mouse shown are: K, M

Is it possible to do it?

semantic-ui angularjs html
1 Answers

I am not familiar with angular or semantic, but it is fairly easy using vanilaJS. You are welcome to test this code on semantic-ui website. Choose to items in the multi-select section then run this in the console:

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

For sure to use it with angular you would like to modify my code but that is one possible approach.

user_73861770
Related