iPhone/Android가 기본 드롭 다운 선택기를 유도합니다.

Question

요소 집합에 대해 기본 모바일 드롭 다운 선택 도구를 유도 할 수있는 방법이 있습니까?

<ul class="dropdown"> 
    <li>Bananas</li> 
    <li>Oranges</li> 
    <li>Apples</li> 
    <li>Pears</li> 
</ul> 

그리고 요소의 세트는 기본 iOS의 드롭 다운 선택기에 팝업 당신이 그들 중 하나를 클릭 할 수 있습니다 : 예를 들어

는, 누군가가리스트로 클릭? 제가 이야기 드롭 다운은 여기에서 볼 수있다 :

난 당신이 다음 "무언가를"실제로 선택한 어떤의 반환 값을 얻을하고 다른 네이티브 함수를 호출해야 할 것이다 실현 그 정보와 함께.

<ul> 및 <li> 요소를 사용하여 만든 사용자 지정 선택 선택 도구가 있기 때문에 선택/드롭 다운 상자가 완벽하게 사용자 지정할 수 있으며 모바일 버전에서 작동하지만 만족합니다. 긴 드롭 다운은 기본 선택 도구처럼 사용자에게 친숙하지 않습니다.

Answer 1

Mobiscroll과 같은 자바 스크립트 라이브러리를 사용할 수 있습니다. 체크 아웃 : demo.

모브 스쿨 서비스는 15 일 동안 만 무료이므로 테스트 해보십시오.

Answer 2

나는 그 질문이 꽤 오래되었다는 것을 알고 있지만, 나는 비슷한 문제를 놓고 고심하고있다. 지금까지 모바일 브라우저는 추가 JS가 필요없이 이러한 기본 컨트롤 요소를 지원합니다 (모바일이 지난해 같은 지원을했는지는 확실하지 않습니다).

그럼 어떻게 할 수 있습니까? 처음에 당신은 당신의 선택 상자 목록을 구축 : (물론 그것뿐만 아니라 하나의 선택 상자와 함께 작동)

<ul> 
    <li> 
     <select class="dropdown" name="fruits"> 
      <option value="Bananas">Bananas</option> 
      <option value="Oranges">Oranges</option> 
      <option value="Apples">Apples</option> 
      <option value="Pears">Pears</option> 
     </select> 
    </li> 
    <li> 
     <select class="dropdown" name="cities"> 
      <option value="Arizona">Arizona</option> 
      <option value="California">California</option> 
      <option value="Colorado">Colorado</option> 
      <option value="Conneticut">Conneticut</option> 
     </select> 
    </li> 
</ul> 

는 그 다음 네이티브 UI처럼 보이게하기 위해 일부 사용자 지정 스타일을 적용

ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

.dropdown { 
    border: 1; 
    padding: 3px 5px; 
    width: 100%; 
    /* attach a custom background image */ 
    background: url('http://dummyimage.com/15x15/00ff40/000&text=^') no-repeat right  center #FFF; 

    /* prevent the default small pointer from showing up */ 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance:   none; 
} 

그게 전부입니다. 작동 live demo on JSBin (iOS 7에서 테스트되었지만 다른 최신 모바일 브라우저에서도 작동해야 함)