2013-04-13 3 views
24

HTML에서 텍스트 입력 옵션을 사용하여 선택 스타일 드롭 다운 메뉴를 구현하려면 어떻게해야합니까?입력란에 HTML 선택 드롭 다운

누군가가 미리 정의 된 옵션 목록에서 선택하거나 자신의 옵션을 입력 할 수 있습니다.

+0

'검색 필드 == 입력 텍스트 필드 ' –

+0

@MohammadAdil 그래, 무슨 뜻인지 아시죠 :) – jesal

답변

54

"list"속성과 함께 입력 텍스트를 사용할 수 있습니다.이 텍스트는 값의 데이터 목록을 나타냅니다.

<input type="text" name="city" list="cityname"> 
<datalist id="cityname"> 
    <option value="Boston"> 
    <option value="Cambridge"> 
</datalist> 

이렇게하면 미리 정의 된 선택 사항을 선택하기위한 드롭 다운이있는 자유 텍스트 입력 필드가 만들어집니다. 예를 들어, 더 많은 정보를 입력하십시오 : https://www.w3.org/wiki/HTML/Elements/datalist

+4

안녕하세요 올렉은 원래 포스터에 플러그인이나 샘플 코드를달라고 요청했습니다. 당신은 당신이 원하는 것을하기 위해 "list"속성을 적용하는 방법을 보여주기 위해 당신의 대답을 살핀다. 고맙습니다. –

+4

woah. 이제 나는 새로운 것을 배웠습니다. 나는 많은 프로그래머들이이 문제를 해결하기 위해이 간단한 트릭을 안다고 생각한다. 고맙습니다. – Dummy

+2

Datalist가 트릭을하지만 일부 브라우저 (예 : chrome)의 디스플레이가 문제가 될 수 있습니다. 요소를 선택하는 것과는 반대로 긴 목록의 경우 큰 문제가되는 스크롤바를 스타일링하거나 간단히 작성할 수는 없습니다. –