Question

Does someone knows how can I change the container for my drop down box?
I have 3 “TD” tags and I would like to move the drop down between them, using client side code.

Answer 1

Do you mean you want to go from something like this…

<td id="firstTD"> 
    <select><!-- ... --></select>
</td>
<td id="secondTD"> 
    <!-- ... -->
</td>
<td id="thirdTD"> 
    <!-- ... -->
</td>

To this?

<td id="firstTD"> 
    <!-- ... -->
</td>
<td id="secondTD"> 
    <!-- ... -->
</td>
<td id="thirdTD"> 
    <select><!-- ... --></select>
</td>

If so, you’d best tag this question JavaScript… and get rid of “object” an “container”. What you’re looking for is the Document Object Model and DOM Scripting. Given that I’ve given those <td> elements id attributes, I could write some JS like this:

<script type="text/javascript">
    var firstTD = document.getElementById("firstTD");
    var thirdTD = document.getElementById("thirdTD");
    var selectElement = firstTD.getElementsByTagName("select")[0]; // cutting some corners...
    firstTD.removeChild(selectElement);
    thirdTD.appendChild(selectElement);
</script>

This is the quickest and cheapest answer, but you’ll want to read a little bit more about other DOM features offered by JavaScript such as getElementById(...), getElementsByTagName(...), childNodes, addChild(...), removeChild(...), replaceChild(...)…

If you want this to happen when the user does something (clicks a button let’s say) you’ll also want to read about JavaScript event handling.