HTML - MOOTOOLS- Add option to select box in ie6

Question

<select id="selectId">
 <option>Please select product ...</option>
</select>

i try on firefox and it work

$('selectId').innertHTML = '<option>Test test</option>'

but on ie , it not work, how to add a option by string option like above in ie

Answer 1

Use the Element Class instead:

new Element('option', {
    text: 'test option'
}).inject($('selectId'));​

Example: http://www.jsfiddle.net/EJH5b/

Answer 2

If you are going to use Mootools, then you should really use the Mootools methods rather than switch between it and vanilla Javascript. One benefit from doing this is that Mootools is already taking care of browser inconsistencies for you. Therefore, if you ignore its methods, you will have to take care of them yourself.

To access the properties of an elements the Mootools way, you can use the set and get methods on any element. The dollar ($) function returns an element so you can just chain set and get to that.

//returns selectId's HTML
var foo = $('selectId').get('html'); 

//Sets the HTML of selectId to <option>Test test</option>
$('selectId').set('html', '<option>Test test</option>'); //

In this case, you just need to use set.

One thing you should be aware of it is this does not add an option to a select box but instead replaces everything inside of the select box with an option. Consequently, if you wanted to use this to add multiple options to a select box, it will not work as you are resetting the HTML each time. It does not make much sense to have a select box that only has a single option so I will assume you are trying to append an option, rather than replace everything with an option. In that case, do the following:

//get the current options selectId's options
var options = $('selectId').get('html'); 

//Add your own option onto the end
options = options + '<option>Test test</option>';

//Set the HTML of selectId to whatever is stored in options
$('selectId').set('html', options);