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
[email protected]
http://jquery.com/discuss/
