2017-02-23 11 views
0

https://jsfiddle.net/u40uz1c4/4/에 어떻게 그 아이콘을 드롭 다운에 추가 할 수 있습니까?semantic ui dropdown에 아이콘을 추가하는 방법은 무엇입니까?

의미 드롭 다운으로 스킨하려는 항목 목록이있는 ASP.NET 드롭 다운이 있습니다. 그러나 각 항목의 아이콘으로 svg 이미지를 원합니다.

참조 : http://semantic-ui.com/modules/dropdown.html#/usage

<select name="gender" class="ui dropdown" id="select"> 
    <option value="">Gender</option> 
    <option value="male">Male</option> 
    <option value="female">Female</option> 
</select> 
<br /> 
<br /> 

<img src='http://icons.iconarchive.com/icons/icons8/ios7/512/Users-User-Male-icon.png' style='width:20px;'> 

<img src='http://icons.iconarchive.com/icons/icons8/ios7/512/Users-User-Female-icon.png' style='width:20px;'> 

답변

1

당신 캔트가하는 ASP.NET 컨트롤러. 간단한 html 마크 업을 ctrate하고 스크립트를 사용하여 목록을 드롭 다운 변환하십시오.

+0

그럴 수도 있습니다. 현재 ASP.NET 드롭 다운에는 AutoPostback = True가 있으며 사용자 프로필에 따라 일부 드롭 다운에서 특정 드롭 다운 항목을 프로그래밍 방식으로 추가하거나 제거하는 서버 측 aspx.vb 코드가 있습니다. 누구나 그 모든 것을 처리하고 드롭 다운에 이미지 아이콘뿐만 아니라 의미 드롭 다운 스킨을 가지고있는 접근법을 알고 있습니까? – user1946932

+0

나는 그렇게 할 방법이 없다. 중요한 경우 html 마크 업을 사용하고 자바 스크립트 포스트 백을 만들어 이벤트를 처리 할 수 ​​있습니다. 또는 면도기를 사용하십시오 ... – Itiel

+0

의견을 보내 주셔서 감사합니다. 나는 내가 준 대답을 끝내었다. – user1946932

0

기존 asp : DropDownList 컨트롤을 검사하여 HTML 서버 측을 프로그래밍 방식으로 만들 수있는 연습을 시작했습니다. 출력은 https://jsfiddle.net/hodtfkys/3/입니다.

<div class='ui icon selection dropdown'> 
    <input name='DropDownListCategoryClone' type='hidden'> <i class='dropdown icon'></i> 
    <div class='default text'> 
    Male 
    </div> 
    <div class='menu'> 
    <div class='item' data-text='Male' data-value='male'> 
     <img class='ui image' src='http://icons.iconarchive.com/icons/icons8/ios7/512/Users-User-Male-icon.png' style='width:20px;'> Male 
    </div> 
    <div class='item' data-text='Female' data-value='female'> 
     <img class='ui image' src='http://icons.iconarchive.com/icons/icons8/ios7/512/Users-User-Female-icon.png' style='width:20px;'> Female 
    </div> 
    </div> 
</div> 
관련 문제