Edited at

jquery minimalect.jsとajaxとの連携

More than 3 years have passed since last update.

単純に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('市区町村を選択');
}
});
}