質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

質問する

ただいまの
回答率

88.32%

javascriptの機能がスマートフォンで一部動きません

解決済

回答 3

投稿 ・編集

  • 評価
  • クリップ 1
  • VIEW 1,808
m-777mat

m-777mat

score 11

プログラミングの初心者のものです
javascriptの機能がスマートフォンで一部動きません
動かせるようにしたいのですがご教授お願いいたします。
試した機種は自分の機種のアイフォン5
知り合いのAndroidメディアスN06Eです。
動かないjavascriptの部分は、一つの目セレクトボックスの中身に影響されを、二つ目のセレクトボックスの中身が変わるというものです。
例 一つ目のセレクトボックスを（フルーツ 野菜 魚）があるとします。
野菜を選ぶと二つ目のボックスに（ほうれんそう にんじん ピーマン）がでてきます。
ですがこの二つ目のセレクトボックスが全く反応しません。

下記ソースになります 

<body link="snow" vlink="snow" alink="snow" bgcolor onLoad="functionName()">
<form name="tabemono" method="post" action="abc.php">

 食べ物選択
<select name="tabemono" onChange="functionName()"> 
<option value="">選択</option>
<option value="野菜">野菜</option>
<option value="フルーツ">フルーツ</option>
<option value="魚">魚</option>
</select>

種類選択
<select name="tabemono2" >
</select>

</form>

<script type = "text/javascript">

function functionName()
{
var select1 = document.forms.tabemono.tabemono; 
var select2 = document.forms.tabemono.tabemono2; 

select2.options.length = 0; 

if (select1.options[select1.selectedIndex].value == "野菜")
{
select2.options[0] = new Option("");
select2.options[1] = new Option("ほうれんそう");
select2.options[2] = new Option("にんじん");
}
else if (select1.options[select1.selectedIndex].value == "フルーツ")
{
select2.options[0] = new Option("");
select2.options[1] = new Option("りんご");
select2.options[2] = new Option("なし");select2.options[3] = new Option("みかん");
}
else if (select1.options[select1.selectedIndex].value == "魚")
{
select2.options[0] = new Option("");
select2.options[1] = new Option("あじ");
select2.options[2] = new Option("さけ");
}
}
</script

実際はもっと食べ物選択、種類のデータは多いです。
お願いいたします

追記

リンク内容
このソースを参考にしたサイトのサンプルです
こちらのサンプルではスマートフォン（iphone アンドロイド）で動きました。
私のセレクトボックスの中身のデータは実際はものすごく多いです
tabemonoの選択数は65項目
newoption("")の中身は全部で1000項目以上です

iphoneではtabemono2のセレクトボックスを選択した際少しフリーズし
トップ画面（アプリが並んでいる画面）にもどってしまいます
データ量がもんだいなのでしょうか

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

more_vert1 件の質問への追記・修正依頼

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    kei344

    2016/05/12 11:55

    コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。

    キャンセル

回答 3 件

link

checkベストアンサー

+1 

<form name="tabemono2" action="">
上記ｾﾚｸﾄ文
</form>


が抜けてるのでは？

各ﾌﾞﾗｳｻﾞF12を押してchromeはconsole、IE,firefoxはｺﾝｿｰﾙ
を表示させてｴﾗｰ表示を確認するとわかるかもしれない

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/14 12:32

    よろしければ追記をご覧していただけますでしょうか

    キャンセル

  • 2016/05/14 19:44 編集

    私のMETA部分間違ってましたすいません
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    でした

    簡単に作りましたが
    tabemonoの選択数は3項目
    newoption("")の中身は0~1999の値が入った2000項目
    iphone5 ios9.1でも大丈夫でしたね
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    </head>
    <body link="snow" vlink="snow" alink="snow" bgcolor onLoad="functionName()">
    <form name="tabemono2" method="post" action="abc.php">
    食べ物選択
    <select name="tabemono" onChange="functionName()">
    <option value="">選択</option>
    <option value="野菜">野菜</option>
    <option value="フルーツ">フルーツ</option>
    <option value="魚">魚</option>
    </select>
    種類選択
    <select name="tabemono2" ></select>
    </form>

    <script type="text/javascript">
    //-->
    function functionName(){
    var select1 = document.forms.tabemono2.tabemono;
    var select2 = document.forms.tabemono2.tabemono2;
    select2.options.length = 0;
    if(select1.options[select1.selectedIndex].value == "野菜"){
    select2.options[0] = new Option("");
    for(var i=0;i<2000;i++){
    select2.options[i] = new Option("野菜:"+i);
    }
    }else if(select1.options[select1.selectedIndex].value == "フルーツ"){
    select2.options[0] = new Option("");
    for(var i=0;i<2000;i++){
    select2.options[i] = new Option("フルーツ:"+i);
    }
    }else if(select1.options[select1.selectedIndex].value == "魚"){
    select2.options[0] = new Option("");
    for(var i=0;i<2000;i++){
    select2.options[i] = new Option("魚:"+i);
    }
    }
    }
    //-->
    </script>
    </html>

    キャンセル

  • 2016/05/17 23:13


    dot-asterisque 様
    たくさんアドバイスいただきまことのありがとうございます。
    そこで大変申し上げにくいのですが
    select2の約1200件のデータすべてを見直した結果
    一部コードにミスがあっただけでした。
    エラーなど出ていなくpcでは問題なく動いていたのできづきませんでした
    申し訳ございません。
    とはいえヒントになったのはdot-asterisque 様のアドバイスでしたので
    ベストアンサーにさせていただきます。
    お付き合いありがとうございました。
    今後ともよろしくお願いいたします。





    キャンセル

link

0

問題の切り分けをしましょう。

まずはPCのブラウザからhtmlにアクセスしてデベロッパーツールのandroid,iphoneのエミュレータからアクセスして実行可能かどうか調べてみてください。

もしここで該当機種のエミュレータでも動かないようであればPCのデバッガーで逐次実行させるなどして原因を調べてください。

もしエミュレータでパスして実機で駄目な場合は実機からデバッグする方法(iphone,androidがあるので調べて見ると良いと思います。

それでも解決しなければまた質問をしてください。

またjsの質問をする際は実行環境(アプリかブラウザか，ブラウザであれば種類とそのバージョン)を明記してもらえると話がスムーズに進むのでいいと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/13 20:12

    tkow様　回答ありがとうございます
    初心者なのでちんぷんかんぷんですが調べてやってみます。

    キャンセル

link

0

selectを取得する際のformのnameの値の指定が間違っているかと思います。 

var select1 = document.forms.tabemono.tabemono;
var select2 = document.forms.tabemono.tabemono2;


ただ、私の環境ではchrome,IE共に質問にあるソースではエラーが出て動作しませんでした。
IEでは動作されているとのことなので、再度質問部分に掲載されているソースコードを見なおした方が良いかもしれません。

という状況を考えるとIEで確認したhtmlとスマホ端末で確認したhtmlが異なっている可能性もありそうですね。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/14 11:57

    hide2e3r様　回答誠にありがとうございます。
    form部分編集いたしました。
    質問のソースを間違えていましたので状況は変わらずですが
    がんばってみます！！ありがとうございました！！

    キャンセル

  • 2016/05/14 12:32

    よろしければ追記をご覧していただけますでしょうか

    キャンセル

  • 2016/05/14 13:42 編集

    項目数が原因だと仮定して
    ・selectName1
    ・selectName2
    のどちらが原因なのかを確認する必要がありそうですね

    今のソースだと項目数を増減させるのが大変なので下記のような形にして
    ・selectName1
    ・selectName2
    を個別に実際のデータの上限数に増やした場合と、両方とも上限数にした場合で実機確認してみるといいかと思います。
    (tabemonoの方を増やすのはちょっと大変そうですが・・・

    function functionName()
    {
    var data = {
    "果物":["","りんご","みかん","オレンジ"],
    "野菜":["","キャベツ","きゅうり","にんんじん","たまねぎ"],
    "肉類":["","豚肉","牛肉"]
    };

    var select1 = document.forms.formName.selectName1;
    var select2 = document.forms.formName.selectName2;

    select2.options.length = 0;

    var target = select1.options[select1.selectedIndex].value;
    var dataLen = data[target].length;
    var optionHtml = '';
    for(i=0; i<dataLen; i++){
    select2.options[i] = new Option(data[target][i]);
    }
    }

    キャンセル

  • 2016/05/14 14:24

    何回も回答していただきお付き合いありがとうございます。
    セレクト1は選択できますが
    セレクト2が空白で反応せずです 。
    アドバイスいただきありがとうございます！
    ためしてみます！

    キャンセル

15分調べてもわからないことは、teratailで質問しよう！

  • ただいまの回答率 88.32%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
質問する

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る