スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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>


実際に動くやつ
サンプル1

このサンプルではボタンを押すたびにセレクトボックスに「unko」が追加される。実際にはクリック時のアクションでajax通信してoptionを動的に変えたりするんだけど、実はこのJS、IEだと動かない。

どうやらappendで追加した空のセレクトボックスにoptionをさらにaddすることが出来ないようだ。

ではid="aaa"のselectを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>

ulに変えたよ

こちらはちゃんと動く。どうやらセレクトボックス特有の挙動みたい。

色々やってみたが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を入れておく作戦だ!

<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>

ダミーoptionを追加したやつ
たしかにIEでも問題なく動くネ!

optionをapendする直前でダミーのoptionを消す処理を入れてやれば一部ピュアJSという不恰好なソースを書かないで済む。また一つIEとjQueryの仲が良くなったよね~。
スポンサーサイト

Leave a reply






管理者にだけ表示を許可する

Trackbacks

trackbackURL:http://epigonen190.blog.fc2.com/tb.php/23-bbcdb49e
該当の記事は見つかりませんでした。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。