最近、Formaでの開発が増えてフルスクラッチとは少し勝手が違い、なかなか思うように動かなくてハマったネタを紹介します。

 

今回は、Formaアイテムのセレクトボックス（プルダウン）をアクション設定からではなくスクリプトアイテムから以下の操作を行います。

 

1．選択値（option）の設定

2．選択状態の変更

 

通常のHTMLのセレクトボックスなら

 

<select name="el_select">
  <option value="1">アースリンク１</option>
  <option value="2">アースリンク２</option>
  <option value="3">アースリンク３</option>
  <option value="4">アースリンク４</option>
</select>

 

という記述でセレクトボックスが完成します。

Formaアイテムも、アイテムを配置した際に上記のHTMLが生成されますが、少し違います。

通常のHTMLの場合、このセレクトボックスの中身（option）の値を変更する場合は、jQueryのappendなどを使用すれば

中身を変えられますが、Formaの場合はappendだけをやると挙動がおかしくなります。

どうやらFormaのセレクトボックスは、selectタグだけではなく他の様々なHTMLアイテムやCSS、スクリプトが組み合わさり制御されている様です。

※アイテムを細かく解析したわけではないので、具体的には説明できません。。。

 

1．選択値（option）の設定

Formaのセレクトのoption値を変更する場合は以下のようなスクリプトを記述します。

まず、option値となるデータをJSON形式で記述します。

 

var selectBoxOptions = {
    "data": {},
    "master": {
        "el_select": [
            {
                "key_el_select": "ELセレクト1",
                "value_el_select": "elselectid1"
            },
            {
                "key_el_select": "ELセレクト2",
                "value_el_select": "elselectid2"
            },
        ]
    }
}

 

次に、option値をセットするFunctionを呼び出します。

window.formaItems.product_80_selectbox.setItemData.el_select(selectBoxOptions);

これで、セレクトボックスの中身が変更されます。

 

selectBoxOptionsオブジェクトの「master」配下にセレクトボックスのName属性と同名の配列を作成し、

さらにその中に”key_”　＋　セレクトボックスのName属性、”value_”　＋　セレクトボックスのName属性の各

オブジェクトを記述し、、、、

 

と、結構面倒ですが、一度書いてしまえば後は設定するだけなので良しとします。

 

これで綺麗にセレクトボックスの中身を自在に変更することができます。

 

2．選択状態の変更​

今度は、セレクトボックスを任意の値で選択状態にします。

これも、通常のHTMLならば

$("[name=el_select]").val("elselectid2");

と、記述すれば選択状態が変わってくれますが、Formaの場合は確かにselectの選択状態は変わっているのですが（上記の場合、elselectid2（ELセレクト2）が選択状態）、見た目の変化がありません。

 

細かく探ると、セレクトボックス右側の「▼」は、どうやらボタンになっているみたいで、これをクリックすると

とある場所に配置されているselect要素とは別のHTMLを表示しているみたいです。

 

これではいくらselect要素を変更しても見た目は変わりませんので、以下のようなコードを記述します。

 

$('[name="el_select"]').focus();
$('[name="el_select"]').val('elselectid2').change();
$('[name="el_select"]').next('input').val($('[name="el_select"]').children(':selected').text());
$('[name="el_select"]').change();

 

ポイントは1行目のfocusで、これをやらないと以下3行が水の泡になります。

 

 

フルスクラッチ開発の画面ではjQueryの魔法ですぐに変更が可能ですが、Formaの場合は少々工夫しないとできません。

Formaで作成した画面も最終的（表示、実行する際）にはHTMLとなりますが、あくまで「Formaアイテム」として考え、フルスクラッチの感覚で工数を見積もると泣きます。

 

全てが全て上記のようなコードを書かないと制御できないわけではありません。

テキストボックスは特に細工をしなくても、jQueryで制御できます。

 

今回は以上ですが、他に設定が厄介そうなアイテムを紹介してゆきます。