LoginSignup
3
4

More than 5 years have passed since last update.

jquery minimalect.jsとajaxとの連携

Last updated at Posted at 2013-09-25

単純にajaxのsuccess内で再度読み込むだけだとselectからリストを生成してもらえない。
liをsuccess内で生成して書き換えてやることで対応可能だった。
ちなみにminmalect.jsでselectを置き換えているとchangeイベントは使えないのでクリックイベントで対応しています。

    // 都道府県から市区町村取得
    $(function(){
        $('#prefBox li').click(function(){
            var prefCode = $(this).attr('data-value'); // 都道府県の番号取得

            // 都道府県に変更があった場合に関数を呼び出す
            if($(this).html() != $('#prefBox .minict_wrapper input').attr('placeholder')){
                changeMunicipality(prefectureCode);
            }
        });
    });

    // 都道府県から市区町村を取得する関数
    function changeMunicipality(prefCode) {
        $('#' + municipality+ ' option').remove(); //optionを取り除く
        $('#municipalityBox .minict_wrapper ul li').remove(); // 既存のliを取り除く

        $.ajax({
            dataType: "jsonp",
            data: {
                "prefCode": prefCode
            },
            cache: true,
            url: "xxxxxxxxxxxxxxxxxxx",
            success: function (data) {

                // 一番最初のliを作成
                minimalect_row = '<li class="minict_first selected">';
                minimalect_row += '市区町村を選択';
                minimalect_row += '</li>';
                $(minimalect_row).appendTo('#municipalityBox .minict_wrapper ul');

                // liとoptionを作成
                $.each(data, function(i) {
                    model = this;

                    // optionの作成
                    row = '<option value="' + model.code + '">';
                    row += model.name;
                    row += '</option>';
                    $(row).appendTo('#' + municipality);

                    // liの作成
                    minimalect_row = '<li data-value="' + model.code + '">';
                    minimalect_row += model.name;
                    minimalect_row += '</li>';
                    $(minimalect_row).appendTo('#municipalityBox .minict_wrapper ul');
                });

                // minimalectの再読み込み(必要か要確認)
                $('select').minimalect();

                // placeholderとvalueを初期化
                $('#municipalityBox .minict_wrapper input').attr('placeholder','市区町村を選択');
                $('#municipalityBox .minict_wrapper input').val('市区町村を選択');
            }
        });
    }
3
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
4