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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CoffeeScript

CoffeeScriptはプログラミング言語です。シンタックスシュガーの導入により、JavaScriptのコードに変換された後動作します。JavaScriptに比べ、可読性と簡潔性が向上しています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

1251閲覧

rails へのjavascriptの実装

sumao

総合スコア15

CoffeeScript

CoffeeScriptはプログラミング言語です。シンタックスシュガーの導入により、JavaScriptのコードに変換された後動作します。JavaScriptに比べ、可読性と簡潔性が向上しています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/08/24 04:49

編集2022/01/12 10:55

Ruby on Rails のビューに、2つプルダウンメニューをつけ、一つ目のプルダウンメニューの選択内容によって二つ目のプルダウンメニューの選択肢を変化させたいです。(条件分岐)
そのためにjavascriptを用いて以下のように書きましたが、コードを実行しても二つ目のプルダウンメニューに選択肢が何も表示されず困っています。

###html.erb

lang

1<body bgcolor onLoad="functionName()"> 2<form name="formName" method="post" action="./pathToProgramFile"> 3<!--選択肢その1--> 4<select name = "selectName1" onChange="functionName()"> 5<option value = "果物">くだもの</option> 6<option value = "野菜">やさい</option> 7<option value = "肉類">にくるい</option> 8</select> 9<!--選択肢その2(選択肢その1の項目によって変化)--> 10<select name = "selectName2"> 11</select> 12</body> 13 14<--以下、jsを同じファイルに記入--> 15 16<script type = "text/javascript"> 17<!-- 18function functionName() 19{ 20var select1 = document.forms.formName.selectName1; //変数select1を宣言 21var select2 = document.forms.formName.selectName2; //変数select2を宣言 22 23select2.options.length = 0; // 選択肢の数がそれぞれに異なる場合、これが重要 24 25if (select1.options[select1.selectedIndex].value == "果物") 26{ 27select2.options[0] = new Option("りんご"); 28select2.options[1] = new Option("みかん"); 29select2.options[2] = new Option("オレンジ"); 30} 31 32else if (select1.options[select1.selectedIndex].value == "野菜") 33{ 34select2.options[0] = new Option("キャベツ"); 35select2.options[1] = new Option("きゅうり"); 36select2.options[2] = new Option("にんんじん"); 37select2.options[3] = new Option("たまねぎ"); 38} 39 40else if (select1.options[select1.selectedIndex].value == "肉類") 41{ 42select2.options[0] = new Option("豚肉"); 43select2.options[1] = new Option("牛肉"); 44} 45} 46//--> 47</script>

以上のHTML、javascriptのスクリプトは
http://www.ksknet.net/javascript/post_54.html
のものをそのまま引用しました。

また、html.erbのページにjsも書く記法は、
https://techacademy.jp/magazine/7611
を参考にしました。

初歩的な質問で申し訳ありませんが、不具合の原因を指摘いただけると幸いです。

個人的には、jsをhtml.erbと同じファイルに書くのが適当でない気がしています。

よろしくお願いいたします。

<追記:mst10806さま>
onloadを削除する前は、このようなブラウザのコンソールエラーが出ていました。
イメージ説明

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2017/08/24 05:00

私のほうでは、静的htmlで申し訳ないのですが想定どおり切り替えられているように思います。念のため</body>を<script>より後ろに持ってこられてはいかがでしょうか?bodyにbgcolorが書いてありますが何も指定してないのであれば削除されては?
sumao

2017/08/24 07:39 編集

早速のご返答ありがとうございます。</body>の位置を変えてみましたが、変化はありませんでした。また、bgcolorも同様に変化がありませんでした。動的なrailsならではの記法があるのでしょうか。。
m.ts10806

2017/08/24 07:42

そもそもjavascriptは実行できていますか?functionName()内に適当にalert()をしてみるのと、functionName()外で適当にalert()してみるのを試してみてください。
m.ts10806

2017/08/24 07:43 編集

あとは・・ bodyにonloadつけるのではなく js記述箇所にwindow.onload = functionName; と書いた結果も教えてください。ブラウザの開発ツールのコンソールでエラーが出ていないかも確認してもらえると助かります。
sumao

2017/08/24 07:52

ありがとうございます。とりあえず、alert()については、functionName()内に書いた時にポップアップウィンドウがでました。二つ目についてはお待ちください。
gouf

2017/08/24 08:14

提示コードされた、たとえば<form> に閉じタグが無いようですが、そういった箇所を修正した場合、変化は見られますか?
sumao

2017/08/24 12:26

mts10806様:お待たせしました。初めの段階ではブラウザコンソールにエラーが出ていましたが、onloadを削除することでエラーは消えました。ただ、この時点でも、更にjs記述部分にwindow.onload = functionName; を追記してもプルダウンメニューに変化はありません。
sumao

2017/08/24 12:27

goufさま:ご指摘ありがとうございます。</form>を追記しましたが、こちらもプルダウンメニューには変化がありませんでした。
guest

回答1

0

ちょっと直接的な回答にはなっていませんが、

https://github.com/argerim/select2-rails

このGemで、やりたいことが実現できるのでは、と思いました。
JSがもし苦手であれば一度ご検討ください。

投稿2017/08/24 16:55

Yuinyan

総合スコア312

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問