html - 在多选中查看所选选项的短值

Question

下面我附上了来自 https://semantic-ui.com/modules/dropdown.html 的一些代码: (多选)

<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>

问题是:
是否可以显示所选选项的简称？我的意思是:
选项有:keyboard, mouse, monitor, laptop
选择选项后 keyboard, mouse showed are: K, M

可以吗？

Answer 1

我不熟悉 Angular 或语义，但使用 vanilaJS 相当容易。欢迎您在 semantic-ui 网站上测试此代码。选择多选部分中的项目，然后在控制台中运行:

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

为了确保将它与 Angular 一起使用，你想修改我的代码，但这是一种可能的方法。