スマホ閲覧時セレクトボックスの表示に関する問題
- スマホでのセレクトボックス表示に問題があります。タップすると一番下から表示されてしまうため、最初から上にスクロールした状態で開く方法を知りたいです。
- Androidのスマホでセレクトボックスをテストしていますが、一番下にスクロールした状態で開いてしまいます。サイズ・セット内容変更を先頭に表示し、上にスクロールできる状態で開く方法を知りたいです。
- Androidのスマホでセレクトボックスを開いても、一番下にスクロールした状態で開いてしまいます。サイズ・セット内容変更を先頭に表示し、上にスクロールできる状態で開く方法を教えてください。
- ベストアンサー
スマホ閲覧時<select>内の要素が下から表示
初期状態で1行表示のセレクトボックスを作成しました。PCで見ればプルダウンメニューになります。「サイズ・セット内容変更」をタップすると中のリストが表示され、さらにタップするとそのページに移動という物です。 ちょっと要点と違う部分もそのままに、下にソースをほぼそのまま載せさせて頂きました。 これを手持ちのAndroidのスマホ(HUAWEI製)でテストしているのですが、セレクトボックスをタップして開くと一番下にスクロールした状態で開いてしまいます。 伝わりにくいかもしれませんが、私としては「サイズ・セット内容変更」を先頭に下にスクロールできる状態で開くと想定していましたが、一番最後の「175cm ×2枚」が最初から表示され、上にスクロールできる状態で開いてしまいます。 選択肢が少なく、画面に収まりスクロールが発生しない場合は問題ありません。 iPhoneのドラムロールみたいなセレクトボックスでは普通に上から表示されています。 原因、または私の思惑通りに「サイズ・セット内容変更」から表示する方法をご存じの方がいらしたら教えて頂けないでしょうか。よろしくお願いします。 ～以下ソース～ <form class="change" name="hyouji"> <select name="menu" onchange="javascript:location=document.hyouji.menu.options[document.hyouji.menu.selectedIndex].value;"> <option value="#">サイズ・セット内容変更</option> <option value="/category/item/077.html">90cm ×2枚</option> <option value="/category/item/078.html">95cm ×2枚</option> <option value="/category/item/079.html">100cm ×2枚</option> <option value="/category/item/081.html">110cm ×2枚</option> <option value="/category/item/082.html">115cm ×2枚</option> <option value="/category/item/083.html">120cm ×2枚</option> <option value="/category/item/084.html">125cm ×2枚</option> <option value="/category/item/085.html">130cm ×2枚</option> <option value="/category/item/086.html">135cm ×2枚</option> <option value="/category/item/087.html">140cm ×2枚</option> <option value="/category/item/088.html">145cm ×2枚</option> <option value="/category/item/089.html">150cm ×2枚</option> <option value="/category/item/090.html">155cm ×2枚</option> <option value="/category/item/091.html">160cm ×2枚</option> <option value="/category/item/093.html">170cm ×2枚</option> <option value="/category/item/094.html">175cm ×2枚</option> <option value="/category/item/095.html">180cm ×2枚</option> <option value="/category/item/096.html">185cm ×2枚</option> <option value="/category/item/097.html">190cm ×2枚</option> <option value="/category/item/098.html">195cm ×2枚</option> <option value="/category/item/099.html">200cm ×2枚</option> <option value="/category/item/100.html">205cm ×2枚</option> <option value="/category/item/101.html">210cm ×2枚</option> <option value="/category/item/102.html">215cm ×2枚</option> <option value="/category/item/103.html">220cm ×2枚</option> <option value="/category/item/104.html">225cm ×2枚</option> <option value="/category/item/105.html">230cm ×2枚</option> <option value="/category/item/106.html">235cm ×2枚</option> <option value="/category/item/107.html">240cm ×2枚</option> <option value="/category/item/108.html">245cm ×2枚</option> <option value="/category/item/109.html">250cm ×2枚</option> <option value="/category/item/110.html">255cm ×2枚</option> <option value="/category/item/111.html">260cm ×2枚</option> <option value="/category/item/112.html">80cm ×2枚</option> <option value="/category/item/113.html">85cm ×2枚</option> <option value="/category/item/114.html">90cm ×2枚</option> <option value="/category/item/115.html">95cm ×2枚</option> <option value="/category/item/116.html">100cm ×2枚</option> <option value="/category/item/117.html">105cm ×2枚</option> <option value="/category/item/118.html">110cm ×2枚</option> <option value="/category/item/119.html">115cm ×2枚</option> <option value="/category/item/120.html">120cm ×2枚</option> <option value="/category/item/121.html">125cm ×2枚</option> <option value="/category/item/122.html">130cm ×2枚</option> <option value="/category/item/123.html">135cm ×2枚</option> <option value="/category/item/124.html">140cm ×2枚</option> <option value="/category/item/125.html">145cm ×2枚</option> <option value="/category/item/126.html">150cm ×2枚</option> <option value="/category/item/127.html">155cm ×2枚</option> <option value="/category/item/128.html">160cm ×2枚</option> <option value="/category/item/129.html">165cm ×2枚</option> <option value="/category/item/130.html">170cm ×2枚</option> <option value="/category/item/131.html">175cm ×2枚</option> </select> </form>
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
そらは仕様です。 jsなどを駆使して組み込まない思った挙動にはならないと思います。
関連するQ&A
- スマホのフォームでのselect複数選択の表示
SPページでフォームを作っており、以下のソースのように、 selectで複数選択させたいと考えています。 --------------------------------------------------------------------------------------------------- <select name="" id="" multiple="multiple"> <option value="">ここから選択してください（複数選択可）</option> <option value="1">1枚</option> <option value="2">2枚</option> <option value="3">3枚</option> <option value="4">4枚</option> </select> --------------------------------------------------------------------------------------------------- 複数選択はできるのですが、iphoneで確認すると デフォルトのボタンの表示が「0 Items」と表示されます。 それをタップすると下にプルダウンが表示される形です。 このデフォルトの表示を「ここから選択してください（複数選択可）」 に変えたいのですが、初心者で調べてもわかりませんでした・・・。 誰かお知恵を貸して頂ければ幸いです。 よろしくお願い致します。
- 締切済み
- デザイナー・クリエイティブ職
- 複数のSELECT文を一括表示したい
csvを利用した検索システムを作成しています。 ********* 表示1 <select name="PRE" size="1"> <option value="all">指定しない</option> <option value="(1)">(1)</option> <option value="(2)">(2)</option> <option value="(3)">(3)</option> <option value="(4)">(4)</option> <option value="(5)">(5)</option> <option value="その他">その他</option> </select> 表示2 <select name="PRE2" size="1"> <option value="all">指定しない</option> <option value="(1)">(1)</option> <option value="(2)">(2)</option> <option value="(3)">(3)</option> <option value="(4)">(4)</option> <option value="(5)">(5)</option> <option value="その他">その他</option> </select> 表示3 <select name="PRE3" size="1"> <option value="all">指定しない</option> <option value="(1)">(1)</option> <option value="(2)">(2)</option> <option value="(3)">(3)</option> <option value="(4)">(4)</option> <option value="(5)">(5)</option> <option value="その他">その他</option> </select> 表示4 <select name="PRE4" size="1"> <option value="all">指定しない</option> <option value="(1)">(1)</option> <option value="(2)">(2)</option> <option value="(3)">(3)</option> <option value="(4)">(4)</option> <option value="(5)">(5)</option> <option value="その他">その他</option> </select> 表示内容 <input type=text name="PREFORM"size="10"> ********* ユーザー側にはセレクトは1つしか見えません。 その時、表示内容は(1)(2)(5)の要素を含む文章が入っており、一つのセレクトで『指定しない』～『その他』までどれを選んでも表示1～4までの内容を反映させたいのです。
- 締切済み
- CGI
- select 表示順
お世話になります。 selectボックスに表示されているデータの表示順を変える方法について、質問します。 DBより読み込んだselectボックス（ｖMENU1） <select size="15" style="width:200;height=220" name="vMenu1"> <option value="P1">みかん</option> <option value="P2">りんご</option> <option value="P3">すいか</option> <option value="P4">なし</option> </select> とあり、 移動ボタンor削除ボタンで もうひとつのselectボックス（ｖMENU2）へ選択したデータを移動し、 （例えば、りんごとすいか） <select size="15" style="width:200;height=220" name="vMenu2"> <option value="P2">りんご</option> <option value="P3">すいか</option> </select> 更に、この表示順をドラッグ＆ドロップで表示順を変えて、 （りんご、すいかの配列をすいか、りんごへ変更） DBへ送信したいのです。 ご存知の方よろしくお願いします。
- ベストアンサー
- JavaScript
- selectでinputの表示を変えたい
セレクトを選択した時に、inputの一部をdisabledにし、同時にinputの背景色を変更したいと思っています。 ----------------------------------------------------------------------- 現在はこんな感じです。 function menuLink(linkLoc) { if(linkLoc !="") { ifrm.location.href=linkLoc;} } --- セレクト１ <SELECT style="WIDTH: 130px" onchange="menuLink(this.options[this.selectedIndex].value)"> <OPTION value="11.html">1</OPTION> <OPTION value="22.html">2</OPTION> <OPTION value="33.html">3</OPTION> セレクト２ <SELECT style="WIDTH: 130px" onchange="menuLink(this.options[this.selectedIndex].value)"> <OPTION value="44.html">1</OPTION> <OPTION value="55.html">2</OPTION> <OPTION value="66.html">3</OPTION> セレクト３ <SELECT style="WIDTH: 130px" onchange="menuLink(this.options[this.selectedIndex].value)"> <OPTION value="77.html">1</OPTION> <OPTION value="88.html">2</OPTION> <OPTION value="99.html">3</OPTION> (実際にはもっと多くのセレクトがあります) <TR> <TD><INPUT type="text" name="aa" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="ba" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="ca" size="10" maxlength="2"></TD></TR> <TR> <TD><INPUT type="text" name="ab" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="bb" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="cb" size="10" maxlength="2"></TD></TR> <TR> <TD><INPUT type="text" name="ac" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="bc" size="10" maxlength="2"></TD> <TD><INPUT type="text" name="cc" size="10" maxlength="2" /></TD></TR> <TR> <TD><INPUT type="text" name=da readOnly value=0 size=10></TD> <TD><INPUT type="text" name=ea readOnly value=0 size=10></TD> <TD><INPUT type="text" name=fa readOnly value=0 size=10></TD></TR> <TR> <TD><INPUT type="text" name=db readOnly value=0 size=10></TD> <TD><INPUT type="text" name=eb readOnly value=0 size=10></TD> <TD><INPUT type="text" name=fb readOnly value=0 size=10></TD></TR> <TR> <TD><INPUT type="text" name=dc readOnly value=0 size=10></TD> <TD><INPUT type="text" name=ec readOnly value=0 size=10></TD> <TD><INPUT type="text" name=fc readOnly value=0 size=10></TD></TR> ----------------------------------------------------------------------- セレクト１のどれかを選択した時に、インプットのaa,ba,da,eaをdisabledにし、同時にaa,ba,da,eaの背景色を変更 セレクト２のどれかを選択した時に、インプットのab,bb,db,ebをdisabledにし、同時にab,bb,db,ebの背景色を変更 という感じにしたいのですが、可能でしょうか？ 可能であれば書き方を教えていただけると助かります。 よろしくおねがいします。
- 締切済み
- JavaScript
- jqueryでselect要素を表示・非表示する方
下記のように、select要素を2つ用意し、果物か魚を撰択すると、それに応じた2番目のselect要素が表示されるようなコードを作りました。 見た目の問題はないのですが、1つ目で魚を撰択し、あじやさんまを撰択しても、最終的にフォームが送信される時には 果物のvalueが参照されてしまいます。 jqueryのhiddenで隠しているだけなので、果物用のselect要素が裏に潜んでいるためにこういった結果になっているかと思うのですが この問題を解決するためにはどうしたらよいのでしょうか。 <form id="test"> <select id="type"> <option value="fruit">果物</option> <option value="fish">魚</option> </select> <select name="sample" id="fruit"> <option value="apple">りんご</option> <option value="orange">おれんじ</option> </select> <select name="sample" id="fish"> <option value="aji">あじ</option> <option value="sanma">さんま</option> </select> <input type="submit" > </form> // はじめは全て隠しておく $('#fruit').hide(); $('#fish').hide(); $('#type').change(function(){ var type = $(this).val(); if (type == 'fruit') { $('#fruit').show(); $('#fish').hide(); } else { $('#fruit').hide(); $('#fish').show(); } }); $('form').submit(function(){ var result = $('form [name=sample]').val(); alert(result); return false; });
- 締切済み
- JavaScript
- <select ・・・>でＷＩＮとＭＡＣの表示の違い
<SELECT name="月"> <OPTION value="選択" selected>選択</OPTION> <OPTION value="1">1</OPTION> <OPTION value="2">2</OPTION> <OPTION value="3">3</OPTION> <OPTION value="4">4</OPTION> <OPTION value="5">5</OPTION> <OPTION value="6">6</OPTION> <OPTION value="7">7</OPTION> <OPTION value="8">8</OPTION> <OPTION value="9">9</OPTION> <OPTION value="10">10</OPTION> <OPTION value="11">11</OPTION> <OPTION value="12">12</OPTION> </SELECT> この方法で「月」と「日」を入れようと思っているのですが、 「月」に関しては問題ないのですが、 「日」だと1～31まであるので、WinIEだとスクロールバーが出るのですが、 MACだと、「選択」の位置よりも上に空白があり、 普通に書ききれない部分は、（画面からはみ出してしまう部分） 逆三角のマークが出ていて、そこへカーソルを持ってくると、 日にちがスクロールして、上にあった空白部分を埋めていきます。 この表示方法は、MACでは普通なのでしょうか？ ※説明下手ですみません＾＾； これで分かってもらえると助かります。
- ベストアンサー
- HTML
- SELECT要素の垂直位置
SELECTをheight指定で高さを広げています。 <select style='height:30px;'> <option value='1'>要素1</option> <option value='2'>要素2</option> <option value='3'>要素3</option> <option value='4'>要素4</option> </select> IE8だと要素文字列がプルダウン表示枠の下に寄ってしまいます。 FireFoxやIE9以上だと垂直方向の中央に寄ります。 できれば、これをIE8でも垂直方向の中央に寄せたいのですが、 方法がわかりません。宜しくお願いします。 IE8だと ┌───────────── │ │ ▼ │要素1 └───────────── ↓ IE8でもこうしたい FireFoxやIE9以上だと ┌───────────── │ │要素1 ▼ │ └─────────────
- ベストアンサー
- CSS
- セレクトメニューでジャンプしたページを新しいWindowで表示したい
リンク先をセレクトメニューで選んでもらって、そのページ内に開く方法は色々なJavaScriptを紹介しているページで見せていただいたのですが、同じWindowではなく、新しいWindowを開いてそこに表示したいのです。 下記は同じWindow内に開いてしまいますが、現在はこのようなカンジで使用しています。 <form> <select onChange="location=this.options[this.selectedIndex].value"> <option value="">選択して下さい <option value="test1.html">TEST-1 <option value="test2.html">TEST-2 <option value="test3.html">TEST-3 </select> </form> 宜しくお願いしますm(_ _)m
- ベストアンサー
- JavaScript
- Firefoxでのリストボックスのスクロール表示について質問です。
Firefoxでのリストボックスのスクロール表示について質問です。 Firefoxでは、スクロール表示に十分な幅が無い場合は、表示されないようです。 WindowsXP環境にて以下の2つのリストボックスを表示した際、 1つ目：縦スクロール表示なし（サイズが２なので幅が十分でない） 2つ目：縦スクロール表示あり（サイズが３なので十分な幅がある） となります。 -------------------------------------------------------- <select size="2"> <option value="1">1</option> <option value="2">2</option> <option value="3" selected="">3</option> <option value="4">4</option> <option value="5">5</option> </select> <select size="3"> <option value="1">1</option> <option value="2">2</option> <option value="3" selected="">3</option> <option value="4">4</option> <option value="5">5</option> </select> -------------------------------------------------------- これをWindows2000環境にて確認したところ どちらの縦スクロールも表示されました。 複数環境でテストしたところ以下のような結果となりました。 ・WindowsXP：スクロール表示なし ・WindowsVista：スクロール表示なし ・Windows2000 Professional/Server：スクロール表示あり ・Windows Server 2003：スクロール表示あり 解像度は全て1280×800です（他解像度でも試しましたが結果は同じでした）。 Firefoxのバージョンは、3.5.7です。 今のところ「OSに依存しているようだ」という見解ですが、はっきりしません。 ・他に要因があるのか？ ・OSもしくは他の要因であっても、スクロール表示の違いを明記したもの、もしくはバグ報告等がないか？（探してみましたが見つからなかったので） と思っています。 ご存知の方がいらっしゃれば、ご回答お願い致します。
- ベストアンサー
- HTML
- selectの要素を、各自submitにしたい！
毎度、お世話になります。 http://www.komonet.ne.jp/script.htm KOMONETさんの「高機能ショッピングカート」を改造しています。 このショッピングカートのページトップに、各カテゴリ別に移動する セレクト要素がありますが、<select>を使わずに、要素を直接 submitさせるボタンにしたいのです。 【カテゴリ１】|【カテゴリ２】|【カテゴリ３】|【カテゴリ４】 現在のコードは下記のようになっています。 (<form....></form>、echo,＼,",;等は省いてあります） ($kindは、PHPコード内にカテゴリを選択する処理文があります） //商品のカテゴリ $category[0] = "選択"; $category[1] = "カテゴリ１"; $category[2] = "カテゴリ２"; $category[3] = "カテゴリ３"; $category[4] = "カテゴリ４"; $cat_num = count($category); +---------------------------------------------- <select name='kind'> for($i=0;$i<$cat_num;$i++){ <option value=". $i . (($i == $_POST['kind']) ? ' selected' : '') . "> " . $category[$i] . "</option> } </select>＼n"; +----------------- これを submit にすると、 for($i=0;$i<$cat_num;$i++){ <input type='submit' name='kind' value=". $i . (($i == $_POST['kind']) ? ' ' : '') . "> } となりますが、その時【 】ボタンの中身は、【0】【1】【2】【3】【4】 といった、数字になります。（これは当然なんですが）、それでこれを、 なんとか、【カテゴリ１】|【カテゴリ２】|【カテゴリ３】|【カテゴリ４】といった submit ボタンに出来ないものでしょうか？ 教えて下さい。 どうか、よろしくお願いします。
- 締切済み
- PHP
お礼
回答ありがとうございました。 Xperia？でしたっけ？ わりとシェアの高いスマホですが、これで見たら想定通りに表示されていました。 やはり、おっしゃる通りでブラウザだか機種固有の仕様のようですので、後で対応を考える事にしました。ありがとうございました。 しかし、致命的ではありませんがバグですよね。これは。