Question

i have a dropdown where there is a value of pixels and below is a div with some data and
the div is of some width and height but what i need to do is when i select any value lets
suppose i selct 350px then the size of the div should automatically adjust accordingly. i
dont have any idea how to do that refer me any link so that i could get help from there.
i am serching for it or any kind of help on google for the last one hour.

here is the html

              <td>
                <select name="sizi_pixel" id="drp">
                    <option value="1">100 Pixels</option>
                    <option value="2">200 Pixels</option>
                    <option value="3">350 Pixels</option>
                    <option value="4">450 Pixels</option>
                    <option value="5">600 Pixels</option>
                </select>
               </td>

and here is the div i want to resize automatically

               <div style=" border-width:3px;border-style:solid;border-color:#ff9900; height:400px; width:300px">

                    <input class="color" value="999">
                            <input class="color" value="999">
                            <input class="color" value="999">
               </div>

any help will be appreciated

Answer 1

This javascript should do the trick!

You need to attach an event listener to your select input, also change the options to represent the value in the box. And give your div an id, I gave it the id ‘myDiv’.

you can also see it working here: http://jsfiddle.net/6avqc/1/

document.getElementById('drp').addEventListener('change', changeSize);

function changeSize() {
    var myDiv = document.getElementById('myDiv');
    var selectbox = document.getElementById('drp');

    var index = selectbox.selectedIndex;
    var value = selectbox[index].value;

    myDiv.style.width = value + 'px';
}​