2012-10-22 2 views
5

Androidデバイス用のブラウザでのコンボボックスを自動的に開くようにします
私は、次のコードを持っている: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> 

これは、デスクトップブラウザ上で動作します(スクリーンショット1を参照)が、残念ながらないAndroidデバイス上のブラウザと(スクリーンショット2を参照)、唯一のコンボボックスをタッチした後、現在のオプションが表示されます。

screenshot desktop                     screenshot device

私は彼らが(スクロールした後、他のオプション)のみの3つのオプションを表示するために、すぐにページを開いた後に(スクリーンショット3を参照)
、可能な場合に表示したいと思います:

screenshot 3

私はどのように行うことができますそれ?

EDIT 1:一方私は同様の問題hereを見つけたが、解決せずにもあるように思わとして...

EDIT 2:私は今、のjQuery Mobileと回避策を見つけlistview、以下の回答を参照してください。しかし、私はまだ他の(良い)アイデアを待っています...

+0

可能重複http://stackoverflow.com/questions/2048213/open-select-using-javascript-jquery – zizoujab

+0

@ Zied-Jaballahはあなたのメッセージをありがとう、あなたが言及したスレッドは '' Javascript(とjQuery)を使って選択ボックスを開く方法はありますか? '。私は知っている方法は、私のソリューションを参照してください、しかし、残念なことに**は、Androidデバイスのモバイルブラウザで動作しません** ... – Taifun

答えて

0

jQuery Mobilelistviewを使用する回避策が見つかりました。
リストビューは、ページを開いた直後に表示されます。ただし、3つのオプション(スクロール後の他のオプション)のみを表示するのが最適なソリューションです。さらに他のアイデアを待っている...

<!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> 

回避策のスクリーンショット:
screenshot

-1

divを使用する代わりに、私はあなたがフォームを使用するはずだと思います。

+0

残念なことに非常に有用ではない... ... ** Android搭載端末のモバイルブラウザで動作するように**する – Taifun

関連する問題