プルダウン連動のJS+動的要素のイベント追記(ライブラリのイベント)

投稿日：2019年4月13日更新日：2019年6月30日

JSがらみでちょっとした小ネタを。

Contents

1 プルダウン連動
2 動的要素へのイベント追加(ライブラリのイベントなど)

プルダウン連動

大カテゴリ→小カテゴリなどとあった場合に、新規だけではなく、編集画面などですでに値がセットされている場合、プログラム側で親の方で小カテゴリ用のリストを用意する必要がありますが、JavaScriptのみでこれを実装することもできます。

//親
$('親セレクタ').change(function(){
    $('親セレクタ option').remove()
    $('親セレクタ optgroup').remove()
    
    //小要素セット処理(jsonを読み込ませるなど)
    setChildrenEle(jsonなど)
});
var 親変数 = $('親セレクタ').val()||''
//親が変わる前に子供の値をとりはめ込む
var 子変数 = $('子セレクタ').val() || ''
//親のチェンジイベント
$('親セレクタ').trigger('change')
//値のセット
$('子セレクタ').val(move_reason)

//親

$('親セレクタ').change(function(){

$('親セレクタ option').remove()

$('親セレクタ optgroup').remove()

//小要素セット処理(jsonを読み込ませるなど)

setChildrenEle(jsonなど)

});

var 親変数 = $('親セレクタ').val()||''

//親が変わる前に子供の値をとりはめ込む

var 子変数 = $('子セレクタ').val() || ''

//親のチェンジイベント

$('親セレクタ').trigger('change')

//値のセット

$('子セレクタ').val(move_reason)

ただし、ajax使う場合は画面に要素が複数あると遅くなります(参考リンク参照)。一瞬でできるようになっておく必要ありますね・・・

参考リンク

ajaxがらみのイベントの発動とwhenに関して

動的要素へのイベント追加(ライブラリのイベントなど)

jQueryで動的要素へのイベントをセットするとき

$('body').on('click', 'セレクタ', function);
or
$(document).on("click", "セレクタ", function);

$('body').on('click', 'セレクタ', function);

$(document).on("click", "セレクタ", function);

のようにかくと思いますが、例えばdatepickerなどライブラリのイベントをセットするときは

$('body').on('focus','セレクタ', function(){
    $(this).datepicker();
});

$('body').on('focus','セレクタ', function(){

$(this).datepicker();

});

のように書けばOKです。検索したんだけど、こういうのが自然に書けないとまずい・・・

あるいは追加要素後、のアクションで普通に再定義してあげればOKです。ダサいけど一番わかりやすい・・・

//DOM追加
$('セレクタ').datepicker()

1 2	//DOM追加 $('セレクタ').datepicker()