Railsでプルダウンメニューを自動選択する方法

前へ 次へ
このQ&Aのポイント
  • Ruby On Railsで開発を行っています。プルダウンメニューを自動選択する方法を教えてください。
  • 質問者はRailsで開発を行っており、プルダウンメニューを選択肢を自動的に選択したいとしています。質問文章には実装したJavaScriptのコードも掲載されています。
  • 質問者は指定したテキストフィールドに値を入力すると、プルダウンメニューの選択肢に同じ値の項目を自動的に選択したいとしています。実装したJavaScriptのコードを紹介しており、プルダウンメニューの値は選択されるが表示がされない状況にあるようです。
回答を見る
  • ベストアンサー

Rails プルダウンメニューを自動選択するには

Ruby On Railsで開発を行っています。 select の構文は以下のようになっています。 <select class="searchable" id="fruitsu"> <option value="001">リンゴ</option> <option value="002">ミカン</option> <option value="003">イチゴ</option> <option value="004">バナナ</option> <option value="005">ブドウ</option> </select> 別のテキストフィールドに"001"と入力すると、上記のプリダウンリストの「001:リンゴ」 を選択できるようにjavascriptを以下のように実装しました。 しかし、プリダウンリストのリストを表示すると値は選択されているのですが、 表示はできませんでした。 表示するには、どのようにすれば良いのでしょうか？ お忙しい中、大変申し訳ありませんが、教えて頂けないでしょうか。 【javascript】 $(function() { $('#fruitsuText').on('change', function() { $('#fruitsu').val($(this).val()); }); }); 以上、宜しくお願いいたします。

  • Ruby
  • 回答数2
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
回答No.2

手元の開発中のコードを下敷きにして 以下の様に書いたら普通に動いたのですが そちらのブラウザは何だったのでしょうか？ こちらは、FirefoxとChromeの最新版で動作確認を行いました。 $("#question_title").on("keyup",function(){ $("#question_category_id").val($(this).val()) });

rapport5683
質問者

お礼

ありがとうございます。参考にさせていただきます。

rapport5683
質問者

補足

ブラウザはIEです。 すいません書洩らしていましたが、JQueryのselect2を使用しています。

その他の回答 (1)

noname#207526
noname#207526
回答No.1

optionをselectedかactiveにすれば良かったと思います。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. Ruby

関連するQ&A

  • Rails プルダウンメニューを自動選択するには

    Ruby On Railsで開発を行っています。 select の構文は以下のようになっています。 <select class="searchable" id="fruitsu"> <option value="001">リンゴ</option> <option value="002">ミカン</option> <option value="003">イチゴ</option> <option value="004">バナナ</option> <option value="005">ブドウ</option> </select> 別のテキストフィールドに"001"と入力すると、上記のプリダウンリストの「001:リンゴ」 を選択できるようにしたいのですが、javascriptでどのように書けばよいのでしょうか お手数ですがご教授願います。

    • ベストアンサー
    • Ruby
  • rails3.0 プルダウンの連動について

    ruby on railsにて開発を行っております。 web開発の経験はありますが、 rubyおよびrailsに関しては初心者です。 要件は以下の通りです。 Ａ画面内でrenderにて部分テンプレートの構成となっております。 テンプレート内部にプルダウンを設け、プルダウンの連動により 読み込むテンプレートを切り替えていきたいと考えております。 現在collection_selectを用いてプルダウンを生成し、 onchangeにてremote_functionを呼び出すことで本機能を実装させようと考えておりますが、 テンプレートの切り替えがうまくいきません。 実装方法及び参考となるような情報をご教授いただければと思います。 よろしくお願いします。 環境 rails 3.0.7 ruby 1.9.2

  • Ruby on Rails でプルダウン

    Ruby on Rails でプルダウンを使ったページを作ってます。 プルダウンを選択すると、別のプルダウンの内容が変更されるというものです。 それ自体はjavascriptを使えばできるのですが、プルダウンの内容はDBに保存されてあるものから引っ張って使いたいと思ってます。 javascriptではDBの内容は引っ張ってこれないと思うのですが、 Railsでこういうことができるのでしょうか。 よろしくお願いします。

    • ベストアンサー
    • Ruby
  • Rails javascriptが動かない

    Railsのフォームにプルダウンメニューを配置して、選択されるとjavascriptでアラートを 表示したいのですが、うまく動作してくれません。 どなたか、お詳しい方がいらっしゃいましたら、ご教授願います。 form.html.erb ------------------------------------------------------------------------------------------------------ <%= javascript_tag do %> $(function(){ //コースを選択する $("#course_id").change(function(){ window.alert("test!!"); }); }); <% end %> <%= form_for ・・・・・ <%= form.select :course_id, @courses %> <% end %> ------------------------------------------------------------------------------------------------------ 【環境】 Ruby 2.2.2 Rails 4.0.13 以上、宜しくお願いします。

    • ベストアンサー
    • Ruby
  • jsでプルダウンで選択したものがうまく表示されない

    以下のhtml文があります。 <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function onButtonClick() { var val = document.forms.form1.textBox1.value; var target = document.getElementById("output"); if (val == "Penguin") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form action="" id="form1"> <div>"Penguin"と入力してください。</div> <input id="textBox1" type="text" value="" /> <input type="button" value="Exec" onclick="onButtonClick();" /> </form> <div id="output"></div> </body> </html> Penguinと入力すると合っていますと表示が出ます。 これを、プルダウン方式にしました。 <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function selectboxChange() { var val1 = document.forms.form1.Select1.value1; var target = document.getElementById("output"); if (val1 == "要素1") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form1" action=""> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option value1 == "要素1">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output"></div> </body> </body> </html> これにすれば、要素１を選択すれば、会っていますと表示されるのですが、されません。 どうしたら改善されますか。

  • プルダウンのメニューを表示を2つ設定。

    プルダウンのメニューを表示を2つ設定したいのですが、 どこが間違っているのでしょうか。 基本的にjsは、セレクタ名がかぶっていれば、機能しなくなります。 間違いをご指摘ください。 <!DOCTYPE html> <html> <head> <title></title> <script language="javascript" type="text/javascript"> function selectboxChange() { var val1 = document.forms.form1.Select1.value; var target = document.getElementById("output"); if (val1 == "要素1") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form1" action=""> <select id="Select1" onchange="selectboxChange();"> <option>---</option> <option value1 == "要素1">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output"></div> </body> </body> <script language="javascript" type="text/javascript"> function selectboxChange11() { var val11 = document.forms.form11.Select11.value; var target = document.getElementById("output11"); if (val11 == "要素11") { target.innerHTML = "合っています。"; } else { target.innerHTML = "間違っています。"; } } </script> </head> <body> <form name="form11" action=""> <select id="Select11" onchange="selectboxChange11();"> <option>---</option> <option value11 == "要素11">要素1</option> <option>要素2</option> <option>要素3</option> <option>要素4</option> <option>要素5</option> </select> </form> <div id="output11"></div> </body> </body> </html>

  • Rails 3 での動的更新について

    Ruby on Rails 3 を利用してウェブ開発をしているのですが、Rails 2 の時に利用できた動的更新が出来なくて困っています。 今回の質問の動的更新とは、テキストフィールドなどに入力があるとそれを検知して、コントローラー内の処理を呼び出して結果をページの一部として表示する、というものです。 Rails 2 の時には以下のようにしていました。 <script language="JavaScript"> <!-- function ShowRule() { $("#show_value").load("/[コントローラー名]/[メソッド名]?[パラメーター]="+document.[フォーム名].[ポスト名].value); } //--> </script> 値を返したい部分に　<div id="show_value"></div>　を置き、入力を監視したい項目に :onclick => "ShowRule()"　のオプションをつけていました。 同じように記述したのですが、Rails 3（というか jquery）だと上手く動きません。上記のような処理を jquery で行う方法をご教授ください。 よろしくお願い致します。

  • プルダウンメニューの選択時のリンク先について

    「プルダウンメニューから選択すると、別ページにリンク」するページを 作成したいです。 以下の様に途中まではできたのですが、 「フレームを使わず、同じウインドウの別の箇所にリンク先を表示 　※プルダウンメニューはそのまま表示」 がどうしてもできません。xmlで作成している関係上、phpも使えません。 何か方法はありませんでしょうか。 <SCRIPT LANGUAGE="JavaScript"> <!-- function menuLink(linkLoc) { if(linkLoc !="") {window.aaa.location.href=linkLoc;} } //--> </SCRIPT> <form> <SELECT onChange="menuLink(this.options[this.selectedIndex].value)"> <OPTION SELECTED>Select</OPTION> <OPTION value="">××</OPTION> <OPTION value="">●●</OPTION> </SELECT> </form>

  • メニューの選択項目に応じて、もう１つのメニューの内容を変更する方法

    メニューの選択項目に応じて、もう１つのメニューの内容を変更する方法 ２つのコンボがります。 1個目は、メーカーを選択します。 ２個目は、機種を選択します。 下記ソースでは、valueの値が取得でいないようです。 （例） makerでドコモを選択したらvalueに１をセット sendwayでドコモ機種(2)を選択したらvalueに２をセット このようなことを実現したいのですが．．． よろしくお願いします。 <script language="JavaScript"><!-- menuItem = [["ドコモ機種(1)","ドコモ機種(2)"]["ドコモ以外機種"]]; function setMenuItem(n) { len = document.myForm.sendway.options.length; for (i=len-1; i>=0; i--) { document.myForm.sendway.options[i] = null; } for (i=0; i<menuItem[n].length; i++) { document.myForm.sendway.options[i] = new Option(menuItem[n][i],menuItem[n][i]); } } // --></script> <select name="maker" onChange="setMenuItem(this.selectedIndex)"> <option value="1" <?= $val?>>ドコモ</option> <option value="2" <?= $val?>>ドコモ以外</option> </select> <select name="sendway" > <option value="1" <?= $val?>>ドコモ機種(1)</option> <option value="2" <?= $val?>>ドコモ機種(2)</option> <option value="3" <?= $val?>>ドコモ以外機種</option> </select>

  • プルダウンメニューからインラインフーム内を操作する

    表題のようなものをjavascriptとフォームを使って 用意しましたが、IE6、IE7の環境で試験しましたが問題ありませんでした。 ところが、これをFirefoxで動かすと、プルダウンで選択してもインラインフレームは まったく変化しませんでした。 どちらでも動作するようにしたいのですがどのように改変すればよろしいでしょうか。 初心者でとんでもない間違いをしているかもしれませんが、どうかご教授ください。 現在以下のような記述になっています インラインフレーム名：inpage <!--javascript部 --> <script type="text/"> function jump(){ var url=document.form1.select1.options[form1.select1.selectedIndex].value; if (url!="") document.inpage.location.href = url; } </script> <!--javascript部 --> <!--フォーム部 --> <FORM NAME="form1"> <SELECT NAME="select1" onChange="jump()"> <option value="">選択してください <option value="AAAAA.html">AAAAA <option value="BBBBB.html">BBBBB <option value="CCCCC.html">CCCCC </SELECT> </FORM> <!--フォーム部 -->

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する