スマートフォンでjavascriptが一部動かない！原因と解決方法を解説
- 初心者向けのプログラミングで、スマートフォンでjavascriptが一部動かないという問題が発生しています。今回は、その原因と解決方法を解説します。
- 具体的には、一つの目セレクトボックスの中身に影響される二つ目のセレクトボックスがスマートフォンで反応しないという現象です。これを解決するためには、適切なコーディングと指定を行う必要があります。
- 下記のソースコードを参考に、一つ目のセレクトボックスと二つ目のセレクトボックスの関連付けやオプションの追加を行ってください。これにより、スマートフォンでも正常に動作するようになります。
- ベストアンサー
スマートフォンjavascriptが一部うごかない
プログラミングの初心者のものです javascriptの機能がスマートフォンで一部動きません 動かせるようにしたいのですがご教授お願いいたします。 試した機種は自分の機種のアイフォン5 知り合いのAndroidメディアスN06Eです。 動かないjavascriptの部分は、一つの目セレクトボックスの中身に影響されを、二つ目のセレクトボックスの中身が変わるというものです。 例 一つ目のセレクトボックスを（フルーツ 野菜 魚）があるとします。 野菜を選ぶと二つ目のボックスに（ほうれんそう にんじん ピーマン）がでてきます。 ですがこの二つ目のセレクトボックスが全く反応しません。 下記ソースになります <body link="snow" vlink="snow" alink="snow" bgcolor onLoad="functionName()"> 食べ物選択 <select name="tabemono" onChange="functionName()"> <option value="">選択</option> <option value="野菜">野菜</option> <option value="フルーツ">フルーツ</option> <option value="魚">魚</option> </select> 種類選択 <select name="tabemono2" > </select> <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> 実際はもっと食べ物選択、種類のデータは多いです。 お願いいたします
- a7a7a77a7a74
- お礼率97% (48/49)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
かいとうがつきませんね。（おぶじぇくとしこうでもりさげているのに） ぜんかくくうはくもじは、すべてはんかくくうはくうもじに ちかんしてください ちなみに、どちらの機種も もちあわせておりません。うごかないかも？！ （かいておきながら、ちょっとまずそうなのが、あるような・・・） <!DOCTYPE html> <meta charset="utf-8"> <title>オブジェクト指向っぽく？</title> <style> </style> <body> <select name="tabemono"> <option value="">選択</option> <option value="野菜">野菜</option> <option value="フルーツ">フルーツ</option> <option value="魚">魚</option> </select> <select name="tabemono2" ></select> <script> function SelectChanger (baseSelect, targetSelect, values) { this.baseSelect = baseSelect; this.targetSelect = targetSelect; this.values = values; } SelectChanger.prototype.handleEvent = function () { var t = this.targetSelect; var v = this.values[this.baseSelect.value]; while (t.hasChildNodes ()) t.removeChild (t.firstChild); if (v) v.forEach (function (v) { var opt = this.ownerDocument.createElement ('option'); opt.value = v; opt.textContent = v; t.appendChild (opt); }, t); } SelectChanger.create = function (baseSelect, targetSelect, values) { if (3 > arguments.length) throw new Error (); var obj = new SelectChanger (baseSelect, targetSelect, values); baseSelect.addEventListener ('change', obj, false); obj.handleEvent (); baseSelect = targetSelect = null; return obj; }; //設定はここから SelectChanger.create ( document.querySelector ('select[name="tabemono"]'), document.querySelector ('select[name="tabemono2"]'), { '野菜': ['ほうれんそう', 'にんじん'], 'フルーツ': ['りんご', 'なし', 'みかん'], '魚': ['あじ', 'さけ'] , } ); </script>
関連するQ&A
- javascriptで連動するセレクトボックス
ショッピングサイトを構築しており、選択した商品の金額を表示させたいと考えています。 大分類・中分類・小分類の3種類のセレクトボックスを用意し、 選んだ商品1つだけの金額をDIV要素に表示させたいのですが、 思うように動作せず行き詰ってしまいました。 現状は食べ物-果物の、リンゴかオレンジは正しく表示されるのですが、 他のものになるとセレクトボックスがうまく連動しない状況です。 ソースが長くなってしまい、大変申し訳ないのですが、 どうかお知恵を貸してください。お願いいたします。 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>選択した商品のみ金額を表示させる</title> <script type = "text/javascript"> <!-- function listControl() { largeList = document.forms.formName.largeName; middleList = document.forms.formName.middleName; smallList = document.forms.formName.smallName; No = 1; //リストの数が異なる場合 middleList.options.length = 0; smallList.options.length = 0; //中分類の判定 if(largeList.options[largeList.selectedIndex].value == "食べ物"){ middleList.options[0] = new Option("果物","fruit"); middleList.options[1] = new Option("野菜","vegetable"); } else if (largeList.options[largeList.selectedIndex].value == "飲み物"){ middleList.options[0] = new Option("スープ","soup"); middleList.options[1] = new Option("ジュース","juice"); } //小分類の判定 if (middleList.options[middleList.selectedIndex].value == "fruit"){ smallList.options[0] = new Option("果物を選択してください"); smallList.options[1] = new Option("1.リンゴ","apple"); smallList.options[2] = new Option("2.オレンジ","orange"); } else if (middleList.options[middleList.selectedIndex].value == "vegetable"){ smallList.options[0] = new Option("野菜を選択してください"); smallList.options[1] = new Option("3.カボチャ","pumpkin"); smallList.options[2] = new Option("4.イモ","potato"); } else if (middleList.options[middleList.selectedIndex].value == "soup"){ smallList.options[0] = new Option("スープを選択してください"); smallList.options[1] = new Option("5.みそ汁","miso"); } else if (middleList.options[middleList.selectedIndex].value == "juice"){ smallList.options[0] = new Option("ジュースを選択してください"); smallList.options[1] = new Option("6.ミックスジュース","mix"); smallList.options[2] = new Option("7.グレープフルーツ","grapefruit"); smallList.options[3] = new Option("8.トマトジュース","tomato"); } } //div要素を非表示にする function resetBtn(){ for(i=1; i<=8; i++){ document.getElementById("buyList"+[i]).style.display="none"; } } //--> </script> </head> <body> <div class="futoSelectForm"> <form name="formName"> <!--選択肢その1--> <select name = "largeName" onChange="listControl()"> <option value = "">種類を選択してください</option> <option value = "食べ物">食べ物</option> <option value = "飲み物">飲み物</option> </select> <!--選択肢その2（選択肢の項目によって変化）--> <select name = "middleName"> </select> <!--選択肢その3（選択肢の項目によって変化）--> <select name = "smallName" onchange="document.getElementById('buyList'+No).style.display='none';document.getElementById('buyList'+(No=(this.selectedIndex))).style.display='block'"> </select> <input type="button" value="リセット" onclick="resetBtn();"> </form> </div> <div id="buyList0" style="display:none;"></div> <div id="buyList1" style="display:none;">果物：1.リンゴ 120円</div> <div id="buyList2" style="display:none;">果物：2.オレンジ 80円</div> <div id="buyList3" style="display:none;">野菜：3.カボチャ 210円</div> <div id="buyList4" style="display:none;">野菜：4.イモ 40円</div> <div id="buyList5" style="display:none;">スープ：5.みそ汁 50円</div> <div id="buyList6" style="display:none;">ジュース：7.ミックスジュース 180円</div> <div id="buyList7" style="display:none;">ジュース：8.グレープフルーツジュース 150円</div> <div id="buyList8" style="display:none;">ジュース：9.トマトジュース 160円</div> </body> </html>
- ベストアンサー
- JavaScript
- Javascript
Javascript に関する質問です。 HTML にプルダウンメニューを設置し各ページに飛ばす際に、 別ウィンドウを開かせるようにするにはどうすればよいのでしょうか？ 下記は Dreamweaver MX がはき出した Javascript です。 当方 Javascript に関してはほとんど素人です。どこに何を、どう書き換えてやればいいのか、どうか教えてください。 【Javascript】 <script language="JavaScript" type="text/JavaScript"> function MM_jumpMenu(targ,selObj,restore){ //v3.0 eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'"); if (restore) selObj.selectedIndex=0; } </script> 【HTML側】 <select onchange="MM_jumpMenu('parent',this,0)" name=menu1> <option selected>-- 選択して下さい --</option> <option value="../1.html">home1</option> <option value="../2.html">home2</option> <option value="../3.html">home3</option> <option value="../4.html">home4</option> </select>
- 締切済み
- JavaScript
- ＨＴＭＬのコンボボックスとの関連
ＨＴＭＬの同ページ内にコンボボックスＡとコンボボックスＢがあるとして、 <!-- JavaScript部------ --> <script language="javascript"> <!--// function cmdCtr() { if (document.forms[0].A.value=='a2'){ document.forms[0].B.disabled=true; document.forms[0].B.selectedIndex=0; document.forms[0].B.value="b1"; }else{ document.forms[0].B.disabled=false; } } //--> </script> <!-- HTML部----------- --> <FORM> <SELECT name="A" onChange="cmdCtr();"> <OPTION value="a1">a1</OPTION> <OPTION value="a2">a2</OPTION> <OPTION value="a3">a3</OPTION> </SELECT> <SELECT name="B"> <OPTION value="b1">b1</OPTION> <OPTION value="b2">b2</OPTION> <OPTION value="b3">b3</OPTION> </SELECT> </FORM> 以上のようなJavaScriptを記述しました。しかし、上記の流れ通りならばa2を選択するとＢボックスが選択出来なくなり、Ｂボックスのb1の値が自動でサーブレットに飛ぶはずなのですが、エラーが起きてしまいます。書き方が悪いのでしょうか？ ちなみに、ＡボックスＢボックス両方がきちんと選択されている場合はエラーは起きません。
- ベストアンサー
- JavaScript
- セレクトボックスの選択状態について
セレクトボックスの横にチェックボックスがあり、 チェックボックスON→セレクトボックスはAの内容 チェックボックスOFF→セレクトボックスはBの内容 となるものがあります。 問題は、これに値を保持する機能を付けたいのです。 例えば、チェックボックスにチェックがある状態でセレクトボックスの３番目の要素を選択していたとします。そこで、チェックをはずし一度Ｂの内容を表示させてから、再度チェックを付けＡの内容に戻した時に３番目の要素が選択されている状態にしたいです。逆の場合も同様にしたいです。アドバイスを頂けたらと思います。宜しくお願い致します。 <script type="text/javascript"> <!-- a = 0; b = 0; txt = {}; txt["A"] = new Array("設定なし","A1","A2"); txt["B"] = new Array("設定なし","B1","B2","B3"); function set(select_box,check_box){ if (document.forms[0].elements[check_box].checked) { key = "A"; b = document.forms[0].elements[select_box].options.selectedIndex; } else { key = "B"; a = document.forms[0].elements[select_box].options.selectedIndex; } while (document.forms[0].elements[select_box].options[0]){ document.forms[0].elements[select_box].options[0] = null; // セレクトボックスのメニューを消去 } for (i=0; i<txt[key].length; i++){ document.forms[0].elements[select_box].options[i] = new Option(txt[key][i],txt[key][i]); // セレクトボックスのメニューの項目を生成・表示テキストとvalue値を設定 } if (key = "A") { document.forms[0].elements[select_box].options.selectedIndex = a; } else if (key = "B") { document.forms[0].elements[select_box].options.selectedIndex = b; } } // --> </script>
- ベストアンサー
- JavaScript
- 親子連動型のselectを設置し、さらにselectedを設定したい。
以下のソースのように、親子連動型のselectを作成しています。 ですが、特定の値にselectedを設定するところで行き詰っています。 例えば、 dai_komokuのselectedが大項目２で chu_komokuのselectedが中２－３ というようなかたちです。 このような事は可能なのでしょうか？ 可能であれば教えていただければ幸いです。 <script type="text/javascript"> <!-- function changelist(){ var num = document.forms["writeform"].dai_komoku.selectedIndex var obj = document.forms["writeform"].chu_komoku.options obj.length = 0 if(num==0){ obj[obj.length]=new Option("----------------",""); } if(num==1){obj[obj.length]=new Option('中１－１','11') obj[obj.length]=new Option('中１－２','12') }else if(num==2){obj[obj.length]=new Option('中２－１','21') obj[obj.length]=new Option('中２－３','23') } if(obj.selectedIndex==-1)obj.selectedIndex=0 if(document.layers){ window.resizeBy(-10,-10) window.resizeBy(10,10) } } //--> </script> <form method="post" action="hoge.php" name="writeform"> 大項目 <select name="dai_komoku" onchange="changelist()"> <option value="" selected>--選択してください--</option> <option value='1'>大項目１</option> <option value='2'>大項目２</option></select> <br> 中項目 <select name="chu_komoku"></select> </form>
- ベストアンサー
- JavaScript
- javascriptのselectboxについての
<select id="select" class="dropdown"> <option>選択してください</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> このようなセレクトボックスを使ってif文？のように 1のoptionを選択したならAと表示する 2のoptionを選択したならBと表示する... というふうにするにはどのようなプログラムにするべきでしょうか？ どうかお知恵をお貸しください。
- 締切済み
- JavaScript
- JavaScriptで書かれたOptionタグをVBAで選択する方法
<SCRIPT language="JavaScript"> document.write("<SELECT name=aaa><OPTION value=A>１</OPTION><OPTION value=B>２</OPTION><OPTION value=C selected>3</OPTION></SELECT>") </SCRIPT> 上記のJavaScriptで書かれたOptionタグをVBAから objIE.Document.forms(0).aaa.Item(1).Selected = True と選択しても動かすことが出来ませんでした。 VBAからJavaScriptで書かれたOptionタグの選択することをしたいのですが不可能なのでしょうか？
- 締切済み
- オフィス系ソフト
- Javascriptの動的リスト作成について
Javascriptの動的リスト作成について お世話になっています。 Javascriptで選択リストを動的に変えたいと思っています。 また、Javascriptで作成したリストは、multipleとして複数選択できるようにしたいと考えています。 そこで、下記のようにスクリプトを書きました。リスト２(smallwheretag)が1つのみ選択を許すときは、うまくいったのですが、multipleにするためにnameを配列にしたところ、うまくリストが作成できなくなってしまいました。 なにかスクリプトに変更が必要なのでしょうか？ご教授お願いいたします。 <HTML部> <select name="bigwheretag[]" onchange="javascript:listChange(this.value);"> <option value="">検索項目</option> <option value="11%">自然</option> <option value="12%">街</option> <option value="13%">家庭</option> </select> <select name="smallwheretag[]" multiple> <option value="">大項目を選択して下さい</option> </select> <Javascript部> var where1_text = new Array("川", "海", "山", "滝", "その他"); var where1_value = new Array("1101", "1102", "1103", "1104", "1199"); flag1 = document.form.bigwheretag.value; if (flag1=="11%") { document.form.smallwheretag.length = where1_text.length; for(var i=0; i<where1_text.length; i++) { document.form.smallwheretag.options[i].text = where1_text[i]; document.form.smallwheretag.options[i].value = where1_value[i]; } }・・・・・・・・以下同様
- ベストアンサー
- JavaScript
- javascriptがIEで機能しない
ヘッダー内 <script language="JavaScript"> <!-- function view_ctrl() { selectvalue = document.form1.select1.options[form1.select1.selectedIndex].value; if(document.getElementById) { document.getElementById("block1").style.display = "none"; if(selectvalue=="選択１"){ document.getElementById("block1").style.display = "block" } } } // --> </script> ボディー内 <form name="form1"> <select name="select1" onchange="view_ctrl()"> <option value="">選択してください</option> <option>選択１</option> <option>選択２</option> </select> </form> <table><tr><td><div id="block1" style="display:block">表示</div></td></tr></table> Firefox3.6ではうまく選択肢によって表示非表示にできたのですが、IE8では選択１を選択しても非表示のままです どこを修正してやればいいでしょうか？ ぜひ御指南ください。
- ベストアンサー
- JavaScript
- VBAでJavaScriptを動かす方法
<SELECT name="Mgr" onchange="Chg(this,1)"> <OPTION selected value="9999999">==選択==</OPTION> <OPTION value="1">a</OPTION> <OPTION value="2">b</OPTION> <OPTION value="3">c</OPTION> </SELECT> 上記のタグで VBAから objIE.Document.forms(0).Mgr.Item(2).Selected = True とSelectタグを選択したときにChg(this,1)を動かす方法を教えてください。 objIE.Navigate "JavaScript:Chg(this,1)"とやっても動きませんでした。
- ベストアンサー
- オフィス系ソフト
お礼
お礼遅くなり申し訳ございません。 アドバイス通りやってみます ありがとうございました