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

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

ただいまの
回答率

89.85%

Rails5で作成したHTMLのselect要素に属性(id)を指定する方法について教えてください。

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 160

koume

score 156

Rails5でアプリケーションを作成しています。(参考書に基づいて作成中です。)
フォームのドロップダウンリストの入力値を取得したくてJavaScriptのことを学習しています。
そこで、select要素の参照をしたいのですがこのやり方を教えて欲しいのです。

現在、以下のようなメソッドでドロップダウンリストが表示出来ています。(都道府県の表示)

models/request.rb

PREFECTURE_NAMES = %w(
    北海道
    青森県 岩手県 宮城県 秋田県 山形県 福島県
    茨城県 栃木県 群馬県 埼玉県 千葉県 東京都 神奈川県
    新潟県 富山県 石川県 福井県 山梨県 長野県 岐阜県 静岡県 愛知県
    三重県 滋賀県 京都府 大阪府 兵庫県 奈良県 和歌山県
    鳥取県 島根県 岡山県 広島県 山口県
    徳島県 香川県 愛媛県 高知県
    福岡県 佐賀県 長崎県 熊本県 大分県 宮崎県 鹿児島県
    沖縄県
  )
ClientFormPresenter.rb

class FormPresenter
  include HtmlBuilder

  attr_reader :form_builder, :view_context
  delegate :label, :text_field, :password_field, :check_box, :radio_button,
    :text_area, :object, to: :form_builder

def drop_down_list_block(name, label_text, choices, options = {})
    markup(:div, class: 'input-block') do |m|
      m << decorated_label(name, label_text, options)
      m << form_builder.select(name, choices, { include_blank: true }, options)
      m << error_messages_for(name)
    end
  end
_form.html.erb

<%= markup do |m|
  p = ClientFormPresenter.new(f, self)
  m << p.notes
  p.with_options(required: true) do |q|

    m << q.drop_down_list_block(:prefecture, '都道府県', Request::PREFECTURE_NAMES) 

  end
end %>


ドロップダウンメニューの情報を取得したいのですが、本や、サイトでは以下のようにしていました。

(例)
HTML

<select id="mySelect">
  <option value="apple">apple</option>
  <option value="orange">orange</option> 
  <option value="grape" selected>grape</option>
</select>


JavaScript

const element = document.querySelector('#mySelect');

const value = element.value;

markup(:div, class: 'input-block') do |m| と
m << form_builder.select(name, choices, { include_blank: true }, options) の
2行でドロップダウンリストが生成されていろと思いますが、そのselect要素にid属性を指定するにはどうすればいいのでしょうか?

<select id="mySelect"> このような感じで属性を指定し、あとでjavaScriptで入力値を取得したいのです。
javaScriptで初めて値を取得し、いろいろとやりたいことができたので学習をし、サイトや参考書の基本的なやり方はだいたい理解出来ましたが、自分のコードではselect要素に属性を指定出来ていないと思うのです。
このコードで(自分のコード)select要素にid属性を指定する方法をご教授お願いします。
javaScript初心者で質問の内容がうまく伝えることができているかも疑問ですが、宜しくお願いします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+1

<select id="mySelect"> このような感じで属性を指定し、あとでjavaScriptで入力値を取得したいのです。

逆質問になりますが、生成されているHTMLですでにidが指定されている、ということはありませんか?

Railsがidを自動生成する場合もありますので、自動生成していたら、「そのidをそのままJavaScriptから呼ぶ」というのも1つの選択肢かと思います。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/07/01 15:44

    回答有り難うございます。ソースコードを表示したところ以下のようになっておりました。
    <label class="required" for="client_prefecture">都道府県</label><select required="required" name="client[prefecture]" id="client_prefecture"><option value="">選択してください</option>
    この場合、idはclient_prefectureという認識でよろしいのでしょうか?

    キャンセル

  • 2019/07/01 15:50

    そのとおりです。

    キャンセル

  • 2019/07/01 16:00

    いつも的確な回答有り難うございます。お陰様で次に進めます。今後とも宜しくお願いします。

    キャンセル

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

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