You can just append straight html to a select element in IE with the
latest version of jQuery.
$('#propinsi').append('<option value="test">Test</option><option
value="test2">Test2</option>');
--
Brandon Aaron
On 11/12/06, Donny Kurnia <[EMAIL PROTECTED]> wrote:
> 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/
>
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
