Foundation4のセレクトボックス問題の対応

CSSフレームワークのFoundation4を利用して、Webアプリケーションの作成を行っていました。
簡単に使えるのはいいのですが、融通が利かない部分もあり、微妙な感覚を覚えました。

その中でも、モーダルを利用した場合にモーダル内のセレクトボックスへFoundationのセレクトボックス表示が反映されないと言う状態に陥ってしまう謎の現象にあたりました。

ベースとなるCSSやJSへの修正は、今後のアップデートなどを考えるとやりたくないため、下記の方法で対応しました。

対応方法としては、モーダル上に設置されているセレクトボックスのIDを、関数へと渡しクラス要素の再配置などを行うと言う方法です。
実際に利用する方法ですが、HTML、JavaScriptの内容は下記のものとなります。

HTML

JavaScript
[javascript]
function fixedSelector(id) {
var ids = (id instanceof Array) ? id : [id], did = null, select = null, div = null, txt = null;
for (var i in ids) {
did = $(ids[i]).data(‘id’), select = $($(“select[data-id^='” + did + “‘]”)[0]), div = $($(“div[data-id^='” + did + “‘]”)[0]);
txt = $(‘#’ + select.attr(‘id’) + ‘ option:selected’).text();
if (txt !== ”) {
div.find(‘a.current’).text(”);
div.find(‘a.current’).removeClass(‘current’);
div.find(‘a.current’).addClass(‘selector’);
$(div.find(‘a’).get(0)).text(txt);
$(div.find(‘a’).get(0)).removeClass(‘selector’);
$(div.find(‘a’).get(0)).addClass(‘current’);
$(div.find(‘li’)).each(function() {
($(this).text() === txt) ? $(this).addClass(‘selected’) : $(this).removeClass(‘selected’);
});
}
}
}
[/javascript]