MTAppjQuery P7

MTAppDynamicSelect

テキスト入力欄を、選択肢から選ぶセレクトボックスに置き換える。dynamic で利用者がその場で項目を追加でき、選んだ値は元のテキスト欄に書き戻される。

テキスト入力欄を、選択肢から選ぶセレクトボックスに置き換える jQuery プラグインです。選んだ値は元のテキスト欄に書き戻されるため、保存される値は通常のテキストフィールドと同じです。dynamic を有効にすると、利用者がその場で新しい選択肢を追加できます。

構文

$(selector).MTAppDynamicSelect(options);

$.fn プラグイン（$(selector).MTAppDynamicSelect(...)）です。対象要素（this）を返すのでチェーンできます。

パラメータ

options {Object} — すべて省略可。以下のプロパティを持ちます。

プロパティ	型	既定値	説明
`text`	string \| Object	`''`	選択肢。カンマ区切り文字列、または optgroup ラベルをキー・選択肢配列を値とする連想配列。各項目は `値\|ラベル` の形式で値とラベルを分けられる
`dynamic`	boolean	`true`	`true` で末尾に「項目を追加」用の選択肢を表示する
`addText`	string	`'項目を追加する'`	追加用選択肢のラベル
`promptMsg`	string	`'追加する項目名を入力'`	項目追加時の `prompt` ダイアログのメッセージ
`initGroupName`	string	`'選択中アイテム'`	（`text` が連想配列のとき）現在値が選択肢に無い場合に作る optgroup のラベル
`separateMode`	boolean	`false`	高度なオプション。`true` のとき、現在のフィールド値を選択肢の先頭へ自動追加せず、生成後に末尾の選択肢を1つ削除する
`selected`	Function \| null	`null`	選択が変わったときに呼ばれるコールバック。引数に確定値（元欄に書き戻される値）を受け取る
`debug`	boolean	`false`	`true` で元のテキスト欄を隠さず残す

戻り値

{jQuery} — 対象要素（チェーン可能）。

保存される値

選択した選択肢の値が元のフィールドへ保存されます（値|ラベル 形式のときは 値 部分）。「項目を追加」で入力した値も同様に保存されます。

使用例

カンマ区切りの選択肢

$('#customfield_area').MTAppDynamicSelect({ text: '東京,大阪,名古屋' });

値とラベルを分ける（値|ラベル）

// value="fukuoka" だが画面には「福岡市」と表示
$('#customfield_area').MTAppDynamicSelect({ text: 'tokyo|東京,osaka|大阪,fukuoka|福岡市' });

optgroup でグループ化

$('#customfield_area').MTAppDynamicSelect({
    text: {
        '東日本': ['東京', '仙台'],
        '西日本': ['大阪', '福岡|福岡市']
    }
});

選択変更時にコールバック

$('#customfield_area').MTAppDynamicSelect({
    text: 'A,B,C',
    selected: function (value) {
        console.log('選択値:', value);
    }
});

user.js での記述例

user.js（「デザイン → user.js を編集」）に書く場合は、mtappVars.screen_id で画面を判定して呼び出します。

(function ($) {
    if (typeof mtappVars !== 'object') return;
    if (mtappVars.screen_id === 'edit-entry') {
        $('#customfield_area').MTAppDynamicSelect({ text: '東京,大阪,名古屋' });
    }
})(jQuery);

生成される HTML

元の入力欄は隠され（debug: true のときは表示のまま）、直後に select.dynamic_select が挿入されます。

<input type="text" id="customfield_area" style="display:none">
<select class="dynamic_select">
    <option value="東京">東京</option>
    <option value="大阪">大阪</option>
    <option value="_add_">項目を追加する</option>
</select>

補足

選択肢の 値|ラベル 形式は、text が文字列・連想配列のどちらでも有効です（| を含む項目は値とラベルに分割されます）。
dynamic: true のとき、末尾の「項目を追加する」を選ぶと prompt で入力を求め、入力値を新しい選択肢として追加・選択し、元欄へ書き戻します。
選択値は常に元のテキスト欄へ書き戻されるため、サーバー側の保存・取得は通常のカスタムフィールドと変わりません。
選択肢のラベル・値、現在のフィールド値、追加入力値はいずれも option の要素として安全に挿入され、HTML としては解釈されません（HTML インジェクションを起こしません）。

構文