3

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?

1
  • "After chosing options keyboard, mouse shown are: K, M" - and after monitor is chosen instead of mouse, or in addition to it ...?
    – C3roe
    Commented Nov 25, 2017 at 16:04

1 Answer 1

1

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.

1
  • From what is seems to me, as long as you would keep the data-value property it doesn't matter what is the text inside. So since you have component and you can control their text you should be able to present it each time with a different text but to keep the data-value. Sorry I don't have much knowledge about those libraries but from understanding the approach I am sure it would work. Post your answer after you figured it out :)
    – U Rogel
    Commented Dec 3, 2017 at 23:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.