CODEWITHSUNDEEP
jqueryfirefoxinternet-explorer-7drop-down-menuappend
Dan
Dan

Reputation: 555

Jquery append <select> not working in IE7, but works in firefox

I am getting data from a database through AJAX and appending tags to a select statement. The following code works in firefox, but only partially in IE. The problem in IE is that is creates the option elements in the dropdown, but the "text" attribute value is empty (the dropdown appears with 30 blank rows! However, the "value" attribute value gets set correctly (which is hte primary key from my database). Is there a different field I need to set in IE other than "text"? The bolded text in teh code below is where I think the problem lies. BTW, value is not empty, and i have tried putting in a string literal in its place and it is still blank in IE.

The code is:

$.each(data, function(key,value){
    $("<option>").attr("value", key).attr("text",value).appendTo("#select1");
});

Upvotes: 2

Views: 13719

Answers (4)

Reputation:

I don't think the posted solution is correct. I believe it should be:


$.each(data, function(key,value){ 
           $("").attr("value", key)
                .text(value)
                .appendTo("#select1"); 
        });

not


$.each(data, function(key,value){ 
           $("option").attr("value", key)
                .text(value)
                .appendTo("#select1"); 
        });

The <>'s got dropped somehow.

Upvotes: 0

Paul Shaver
Paul Shaver

Reputation: 1

altCognito is correct... however, if you are looping through integers, be sure that you use

key/value.toString() - while jQuery won't throw any errors and will handle it, it'll avoid additional overhead.

it's all about performance, right? :)

$.each(data,  
       function(key,value){  
           $("option").attr("value", key.toString()) 
                .text(value.toString()) 
                .appendTo("#select1");  
        });

Upvotes: 0

Reputation:

Lets try that again with block quotes:

The solution should be:

$.each(data, 
       function(key,value){ 
           $("<option>").attr("value", key)
                .text(value)
                .appendTo("#select1"); 
        });

"options" needs to be surrounded with <>

Upvotes: 1

cgp
cgp

Reputation: 41381

I would try to use .text() instead:

  $.each(data, 
       function(key,value){ 
           $("option").attr("value", key)
                .text(value)
                .appendTo("#select1"); 
        });

I think this is what you are going for?

Upvotes: 7

Related Questions