2012-10-22 34 views
5

Tôi muốn mở hộp tổ hợp tự động trên trình duyệt dành cho thiết bị Android.
Tôi có đoạn mã sau:hộp tổ hợp mở tự động trên trình duyệt di động cho các thiết bị Android

<!doctype html> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<script src="jquery-1.8.0.min.js" type="text/javascript"></script> 
<title>Combobox</title> 
</head> 

<body> 
    <div id="combobox"> 
    <select id="select"> 
     <option>1</option> 
     <option>2</option> 
     <option>3</option> 
     <option>4</option> 
     <option>5</option> 
    </select> 
    </div> 

    <script> 
    $(document).ready(function() { 
     document.getElementById('select').size=3; 
    }); 
    </script> 
</body> 
</html> 

này hoạt động trên các trình duyệt máy tính để bàn (xem ảnh chụp màn hình 1), nhưng tiếc là không phải với các trình duyệt trên thiết bị Android (xem ảnh chụp màn hình 2), chỉ sau khi chạm vào combobox hiện các tùy chọn xuất hiện:

screenshot desktop                     screenshot device

Tôi muốn chúng xuất hiện ngay lập tức sau khi mở trang (xem ảnh chụp màn hình 3)
và nếu có thể để chỉ hiển thị 3 lựa chọn (các tùy chọn khác sau khi di chuyển):

screenshot 3

Làm thế nào tôi có thể làm cái đó?

EDIT 1: Trong khi đó tôi tìm thấy một vấn đề tương tự here, nhưng vì nó có vẻ là cũng không có giải pháp ...

EDIT 2: bây giờ tôi tìm thấy một workaround với jQuery Mobilelistview, xem câu trả lời bên dưới, tuy nhiên tôi vẫn đang đợi các ý tưởng khác (tốt hơn) ...

+0

thể trùng lặp http://stackoverflow.com/questions/2048213/open-select-using-javascript-jquery – zizoujab

+0

@ Zied-Jaballah cảm ơn cho thông điệp của bạn, chủ đề bạn đã đề cập là về "Có cách nào để mở một hộp chọn bằng cách sử dụng Javascript (và jQuery) không?" '. Tôi biết, có một cách, xem giải pháp của tôi, nhưng điều này không may ** không hoạt động trên trình duyệt di động cho các thiết bị Android ** ... – Taifun

Trả lời

0

Tôi hiện đã tìm thấy giải pháp thay thế sử dụng jQuery Mobile với một danh sách xem .
Chế độ xem danh sách ngay lập tức xuất hiện sau khi mở trang, điều này là phù hợp với mục đích của tôi. Tuy nhiên, một giải pháp hoàn hảo sẽ chỉ hiển thị 3 tùy chọn (các tùy chọn khác sau khi cuộn). Vẫn đang chờ đợi những ý tưởng khác ...

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
<script src="jquery-1.8.0.min.js"></script> 
<script src="jquery.mobile-1.2.0.min.js"></script> 
<title>Combobox Workaround</title> 
</head> 

<body> 
    <div data-role="page"> 
    <ul id="listview" data-role="listview"> 
     <li><a href="#">1</a></li> 
     <li><a href="#">2</a></li> 
     <li><a href="#">3</a></li> 
     <li><a href="#">4</a></li> 
     <li><a href="#">5</a></li> 
    </ul> 
    </div> 

    <script> 
    $('#listview').on('click', ' > li', function() { 
     // show selected index in alert box 
     alert('index=' + $(this).index()); 
    }); 
    </script> 
</body> 
</html> 

chụp màn hình của workaround:
screenshot

-1

Thay vì sử dụng div. Tôi nghĩ rằng bạn đang sử dụng một hình thức.

+0

phỏng đoán tốt, nhưng tiếc là không hữu ích ... câu hỏi là về cách hoàn thành công việc ** để làm việc trên trình duyệt dành cho thiết bị di động cho các thiết bị Android ** – Taifun

Các vấn đề liên quan