はじめに

以前の記事で非同期処理について書かせて頂きました。
今回は、その別バリエーションを書かせて頂きます。

実行

前回は"フォームに入力した文字が別の場所に表示させる"コードについてお話しましたが、今回は***"ボタンを押すとプルダウンメニューが表示される"コード***について書かせて頂きます。

まずは、元となるビューファイルです。

index.html.haml

.btn　表示させる
= form_with model:@sample, local: true do |f|
  .pulldown

btnを押してpulldownの所にプルダウンメニューを表示させるわけですね。

CSSはとりあえず次の様に書いておけば、ボタンっぽくなるでしょう。

.btn{
 background-color: #F999;
 padding: 5px;
}

次にJSのファイルです。とりあえず、「ボタンを押したら発火する」だけのコードを書きます。

$(".btn").on("click", function(){

});

中にはなにも書いてませんので、追加するビューコードと追加するための処理を書いていきます。

$(".btn").on("click", function(){
  let Form = `
  <form action = "/" accept-charset = "UTF-8" method = "POST" class = "menu">
      <select class = "pulldown__menu" name = "menu">
  `
  $(".pulldown").html(Form);
});

この時クラス名を間違えると、プルダウンメニューが追加されない、CSSが適用されないなどの不具合が起きますので、
慎重に記述してください。

これでプルダウンメニューが追加されるようになりますが、今は中身が空っぽなので何も選ぶ事はできません。
そのため、プルダウンメニューの中身を追加するコードを書いていきます。

(前略)
  var list = [ "--", "東", "西", "南", "北"];
  let Form2 = `
    ${list.forEach(function(value){
      let wrapper = `<option value>${value}</option>`
    $(".pulldown__menu").append(wrapper);
  })
  }
  `
(後略)

（注意）無駄な記述があるコードになっています。
修正でき次第、更新します。

全体の流れとしては、

①ボタンをクリックしたらフォームを表示させる(html)
②メニューで表示させる値を配列で用意する(list)
③メニューの項目一つ一つを、eachメソッドで追加(append）していく

となります。

全体のJSコードは次の通りです。

$(function(){
  $(".btn").on("click", function(){
    let Form = `
    <form action = "/" accept-charset = "UTF-8" method = "POST" class = "menu">
        <select class = "pulldown__menu" name = "menu">
    `
    $(".pulldown").html(Form);

    var list = [ "--", "東", "西", "南", "北"];
    let Form2 = `
      ${list.forEach(function(value){
        let wrapper = `<option value>${value}</option>`
      $(".pulldown__menu").append(wrapper);
    })
    }
    `
  });
});