查看所選選項短值多選

下面我附加了一些代碼片段從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

是否有可能做到這一點？

來源

2017-11-25 user8820082

_「在選擇鍵盤後，顯示的鼠標是：'K'，'M'」_ - 並且選擇'monitor'而不是'mouse'，或者除此之外......？ – CBroe

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

對於一定要使用它的角度，你想修改我的代碼，但是這是一種可能的方法。

來源

2017-11-25 15:59:34 cowCrazy

請給我完整的例子嗎？我無法追隨你的線索。 – user8820082

從我看來，只要你保留'data-value'屬性，它就不會在乎什麼是文本。因此，既然你有組件，並且你可以控制它們的文本，你應該能夠每次使用不同的文本來呈現它，但要保留「數據值」。對不起，我對這些庫沒有太多的瞭解，但從理解這種方法我相信它會起作用。找出答案後發佈你的答案:) – cowCrazy

查看所選選項短值多選

回答

相關問題