查看所选选项短值多选

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后：K, M

是否有可能做到这一点？

Answer 1

我不熟悉角度或语义，但使用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); 
}); 

对于一定要使用它的角度，你想修改我的代码，但是这是一种可能的方法。