Question

I have a problem with the Mootools get method and IE8. This is the thing.

I have a select combo that loads dynamically the options with a Request.HTML

HTML:

<select name="model" id="model" class="customSelectModel">
    <option>Modelo</option>
</select>

Javascript:

var req = new Request.HTML({
        method: 'get',
        url: loadModels,
        data: "model="+model,
        update: $('model'),
}).send();

Also, the select has a custom style, with this: http://vault.hanover.edu/~stilson/simpleselectstyle/

The problem is when I load the content of model, IE throw me an error:

Object doesn’t support this property or method.

I don’t know why, but

span.addEvent('change',function(){
     span.set('text',this.options[this.options.selectedIndex].get('text'));
});

does not work with IE8 (as usually, it works perfectly with the other browsers) . I’m using Mootools 1.3.2

Any ideas? Thanks a lot.

Answer 1

you cannot update <select> elements content via innerHTML in a cross-browser fashion, which the update: $("model") will try to do.

I would suggest refactoring via an onComplete: function() {} where you:

• delete all child elements of model
• iterate through options elements sent via HTML and inject them into the model
• call whatever method your custom styling provides (if it has any) to freshen object members for model and fireEvent("change") to highlight your new selected choice for scripting, if you need it.

for your second question.

this.options.get("value") returns selected value.

if its a multiple select, it can have more than 1 value.

mootools provides selectel.getSelected() which returns an array of options you can iterate to get text from. hence:

selectel.getSelected().get("text") will return ["sometext"] or ["sometext1", "sometext2"] on a multiple select.