다중 선택

Question

에서 선택한 옵션의 짧은 값보기 : (다중 선택를)

<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을 chosing 후 있습니다 K, M

그것을 할 수 있습니까?

Answer 1

각도 나 의미에 익숙하지 않지만 vanila를 사용하면 상당히 쉽습니다. 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); 
}); 

당신이 내 코드를 수정하고 싶은 각도와 함께 사용하지만 하나의 가능한 방법입니다 : 다중 선택 섹션에서 항목을 선택 후 콘솔에서이 작업을 실행합니다.