Dynamic form select box not working in safari

JavaScript
1

so im trying to create this dynamic form which changed one element depending on what option you select, and it works on firefox, but not safari

function change_select() {
document.getElementById(‘size_select’).innerHTML= ‘<select name=“size” class=“form” size=“1” ><option value=“3.25x2”>3.25" by 2"</option><option value=“custom”>custom</option></select>’;
}

using onclick

<option value=“something” onclick=“change_select()”>something</option>

any ideas? or how i could write this in mootools

2

it’s probably better and more cross browser compatible to use DOM methods to create/change elements than using .innerHTML

3

what would that look like in this case?

4

I would use methods including createElement() and [URL=“http://www.w3schools.com/dom/dom_nodes_add.asp”]appencChild() or the [URL=“http://www.w3schools.com/jsref/dom_obj_option.asp”]option object to manipulate the <select> list

5

hm, would there be a simpler way to do this, dom just seems a bit complicated at the moment for me

6

the only other way I can think of is the way you were doing it originally, but that can have browser compatibility issues as well as possibly other issues as you are finding out.

7

How will the groups of options change?

If it’s only one or two options that vary, using the option-specific scripting to modify them could work well.

If instead there will be different groups of options, it could be better to have all of the available selections on the page and then to only enable the one that counts.