Ajax通信によってセレクトボックスを出現させる

概要

Ajax通信を利用し、あるアクションによってセレクトボックスを出現させます。

↓完成形

困ったポイントは、選択するものによってselectタグのoptionの数が違うということです。

今回でいうと、
レディース　トップス/パンツ　の２つ
メンズ　　 トップス/パンツ/バッグ/靴　の４つ

条件によって、ビューに挿入する要素の長さを変えなければいけません。

完成コード

　まずは完成コードがこちらです。

category

$("#range").change(function(){
    $("#range-second").remove();
    $("#range-third").remove();
    var category = $('option:selected').val();

    function buildHTML(children){
      var option = ``
      children.forEach(function(child){
        option += `<option value="${child.id}">${child.name}</option>`
      });

      var html = `<select name="range-second" id="range-second">
                    <option value label=" "></option>
                    ${option}
                   </select>`

      return html;
    };
    
    $.ajax({
      url: '/users/1/products/new',
      type: "GET",
      data:{category: category},
      dataType: 'json'
      })
      .done(function(data){
        var html = buildHTML(data);
        $(".products_new_container__content__select__box__category").append(html);
      })
      .fail(function(){
        alert('error');
      })
  });

このなかで、今回のポイントとなるコードはこの部分です。

function buildHTML(children){
      var option = ``
      children.forEach(function(child){
        option += `<option value="${child.id}">${child.name}</option>`
      });

      var html = `<select name="range-second" id="range-second">
                    <option value label=" "></option>
                    ${option}
                   </select>`

      return html;
    };

一行目のbuildHTML関数の引数「children」には、selectタグの選択肢が配列として格納されています。

二行目で、まず空の変数optionを宣言します。

その次でforEachメソッドを使用し、childrenに含まれた要素の数だけ変数optionの中にoptionタグを追加していきます。

あとは、必要なだけのoptionタグの入った変数optionを、ビューに挿入する変数htmlのなかに入れるだけです。

まとめ

まず空の箱を用意して、配列の要素をeachでひたすら詰めていくというのは、Rubyでもよくやりました。