jQueryのSELECT操作とIEをちょっとだけ仲良くさせる方法
例えばjQueryプラグインを作ってる時、任意のdivの直後にセレクトボックスを挿入して、他のアクションをキーに$.getでセレクトボックスの値を動的に変えたいよーなんて思う時がある。
書いてみるとこんな感じ
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
$('#body').append('<select id="aaa"></select>');
$('.button').click(function(){
$('#aaa').append('<option>unko</option>');
});
}
);
</script>
<body>
<div id="body">
<input type="button" class="button" id="button" value="add unko" /><br/>
</div>
</body>
実際に動くやつ
サンプル１
このサンプルではボタンを押すたびにセレクトボックスに「unko」が追加される。実際にはクリック時のアクションでajax通信してoptionを動的に変えたりするんだけど、実はこのJS、IEだと動かない。
どうやらappendで追加した空のセレクトボックスにoptionをさらにaddすることが出来ないようだ。
ではid="aaa"のselectをulに変更したらどうか。
ulに変えたよ
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
$('#body').append('<ul id="aaa"></ul>');
$('.button').click(function(){
$('#aaa').append('<li>tinko</li>');
});
}
);
</script>
<body>
<div id="body">
<input type="button" class="button" id="button" value="change text" /><br/>
</div>
</body>
こちらはちゃんと動く。どうやらセレクトボックス特有の挙動みたい。
色々やってみたがjQueryではどうしようもなく、結局appendの部分だけピュアJSに書き換えることに。
変えたのがこっち
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
var i=0;
$('#body').append('<select id="aaa"></select>');
$('.button').click(function(){
sBox = window.document.getElementById("aaa");
sBox.options[i] = new Option("unko","unko");
i++;
});
}
);
</script>
<body>
<div id="body">
<input type="button" class="button" id="button" value="add unko" /><br/>
</div>
</body>
これはちゃんと動く
せっかくjQueryでプラグイン作ってるのに一部だけJSとかいけてねえなあ。なんて思っていたら、友人から思わぬ解決策を聞いた。名づけて空のselectを作るときに、ダミーのoptionを入れておく作戦だ！
ダミーoptionを追加したやつ
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
$('#body').append('<select id="aaa"><option>dummy</option></select>');
$('.button').click(function(){
$('#aaa').append('<option>unko</option>');
});
}
);
</script>
<body>
<div id="body">
<input type="button" class="button" id="button" value="add unko" /><br/>
</div>
</body>
たしかにIEでも問題なく動くネ！
optionをapendする直前でダミーのoptionを消す処理を入れてやれば一部ピュアJSという不恰好なソースを書かないで済む。また一つIEとjQueryの仲が良くなったよね〜。
