[jQuery] Appending new option object into existing select in IE
In my previous email, I'm asking how to appending new options object
into existing select, and now I've found the solution.
This is my previous code:
//------------------------------------------------------------------
$("#propinsi").change(function () {
$(".loader").css("display","inline");
$.get("somefile.php", {parameter : someparameter}, function (r) {
//remove previous element but keep the first ones
$("#kota").children().gt(0).remove();
var options = $("option",r);
for (var i=0; i<options.length; i++) {
//get new option attribute
var value = options[i].getAttribute("value");
var label = options[i].getAttribute("label");
//create new option Object
var newoption = new Option(label, value);
//append it into existing select
$("#kota").append(newoption);
}
$(".loader").css("display","none");
} );
} );
//------------------------------------------------------------------
The problem I had that in Firefox, this code works perfectly. In IE6, I
got select but the label didn't appear. The value somehow appear and
submitted by form correctly.
I tried this method to add the new options object. I got it from some
thread in this mailling list:
//------------------------------------------------------------------
var optn = document.createElement("OPTION");
optn.text = label;
optn.value = value;
$("#kota").append(optn);
//------------------------------------------------------------------
but it still didn't work in IE6.
When I lookup my old works (around 3 years ago), I had this solution:
//------------------------------------------------------------------
$('#kota')[0].options[i+1]=newoption;
//------------------------------------------------------------------
And it's works like magic, do the right things in FF and IE6. The
complete code is like this:
//------------------------------------------------------------------
$("#propinsi").change(function () {
$(".loader").css("display","inline");
$.get("somefile.php", {parameter : someparameter}, function (r) {
//remove previous element but keep the first ones
$("#kota").children().gt(0).remove();
var options = $("option",r);
for (var i=0; i<options.length; i++) {
//get new option attribute
var value = options[i].getAttribute("value");
var label = options[i].getAttribute("label");
//create new option Object
var newoption = new Option(label, value);
//append it into existing select
$('#kota')[0].options[i+1]=newoption;
}
$(".loader").css("display","none");
} );
} );
//------------------------------------------------------------------
Tested well in IE6, FF 1.5, and Opera 9 running on WinXP SP2
FYI:
AJAX call to file somefile.php will return a result in XML like this:
<options>
<option value="value1" label="label1" />
<option value="value2" label="label2" />
</options>
Hope this code help. If anyone interesting turning this code into
plugins, you're welcome ;)
--
Donny Kurnia
http://hantulab.blogspot.com
http://hantulab.multiply.com
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/