Q&A
コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。
プログラミングの初心者のものです
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のセレクトボックスを選択した際少しフリーズし
トップ画面（アプリが並んでいる画面）にもどってしまいます
データ量がもんだいなのでしょうか
回答3件
0
ベストアンサー
html
1<form name="tabemono2" action=""> 2上記ｾﾚｸﾄ文 3</form>
が抜けてるのでは？
各ﾌﾞﾗｳｻﾞF12を押してchromeはconsole、IE,firefoxはｺﾝｿｰﾙ
を表示させてｴﾗｰ表示を確認するとわかるかもしれない
投稿2016/05/13 06:08
退会済みユーザー
総合スコア0
sonicgear様 回答誠にありがとうございます。
form分は質問では省いていますが書いてあります。
ご指示いただきました通りＦ１２を押しコンソールを表示させましたが
エラー メッセージ 警告はすべて0でした。
ＩＥではちゃんと動くのですが。。。
回答ありがとうございました！
IOS9.3.1では動きますね
何だろう
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="target-densitydpi=device-dpi, width=100%, initial-scale=1.0, user-scalable=no, maximum-scale=1">
</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("");
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>
</html>
スマホの動作確認する時、IEでは動くのに、スマホでは動かない事があり
chrome,firefoxで問題なければ動く事が良くあります
javascriptにconsole.log(1)とかalert(1)とか複数入れて動作が何処で止まってるかかくにんするのもいいかも知れないです
sonicgear 様
回答ありがとうございます。
headのmeta部分の設定などは関係ないのでしょうか？
new Option("")の中身が実際はものすごく多いので
改修となると気が遠くなります。。。
アドバイス通りやってみます！！
ありがとうございました！！
よろしければ追記をご覧していただけますでしょうか
私の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>
dot-asterisque 様
たくさんアドバイスいただきまことのありがとうございます。
そこで大変申し上げにくいのですが
select2の約1200件のデータすべてを見直した結果
一部コードにミスがあっただけでした。
エラーなど出ていなくpcでは問題なく動いていたのできづきませんでした
申し訳ございません。
とはいえヒントになったのはdot-asterisque 様のアドバイスでしたので
ベストアンサーにさせていただきます。
お付き合いありがとうございました。
今後ともよろしくお願いいたします。
0
selectを取得する際のformのnameの値の指定が間違っているかと思います。
js
1var select1 = document.forms.tabemono.tabemono; 2var select2 = document.forms.tabemono.tabemono2;
ただ、私の環境ではchrome,IE共に質問にあるソースではエラーが出て動作しませんでした。
IEでは動作されているとのことなので、再度質問部分に掲載されているソースコードを見なおした方が良いかもしれません。
という状況を考えるとIEで確認したhtmlとスマホ端末で確認したhtmlが異なっている可能性もありそうですね。
投稿2016/05/13 23:35
退会済みユーザー
総合スコア0
hide2e3r様 回答誠にありがとうございます。
form部分編集いたしました。
質問のソースを間違えていましたので状況は変わらずですが
がんばってみます！！ありがとうございました！！
よろしければ追記をご覧していただけますでしょうか
項目数が原因だと仮定して
・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]);
}
}
何回も回答していただきお付き合いありがとうございます。
セレクト1は選択できますが
セレクト2が空白で反応せずです 。
アドバイスいただきありがとうございます！
ためしてみます！
0
問題の切り分けをしましょう。
まずはPCのブラウザからhtmlにアクセスしてデベロッパーツールのandroid,iphoneのエミュレータからアクセスして実行可能かどうか調べてみてください。
もしここで該当機種のエミュレータでも動かないようであればPCのデバッガーで逐次実行させるなどして原因を調べてください。
もしエミュレータでパスして実機で駄目な場合は実機からデバッグする方法(iphone,androidがあるので調べて見ると良いと思います。
それでも解決しなければまた質問をしてください。
またjsの質問をする際は実行環境(アプリかブラウザか，ブラウザであれば種類とそのバージョン)を明記してもらえると話がスムーズに進むのでいいと思います。
投稿2016/05/12 00:50
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
