Skip to content Skip to sidebar Skip to footer
Home / Html / Javascript / Php

Change The Size Of Div By Selecting Value From The Dropdown

Post a Comment
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 s

Solution 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';
}​

Solution 2:

Give your div an id and add an event listener for the change Event of your list view. Everytime the event is raised, you can change the size of the list

<script>
    $(function() {
        $("#drp").change(function() {
            $("#rect").width($(this).val() + "px");
        });
    });
</script>

you have to include jquery in your page and modify the vals of your list to match the widths


Solution 3:

Here is an working example if you have additional questions feel fre to ask:

Jsfiddle DEMO: http://jsfiddle.net/kPFry/

<html>
<head>

<style>
    input {

        position: relative;
        width: 90%;

    }
</style>

<script>

function chng_div(src_id,div_id){

    var src_obj = document.getElementById(src_id);
    var div2chg = document.getElementById(div_id);
    div2chg.style.width = src_obj.value+"px";

}

</script>

</head>
<body>


    <select name="sizi_pixel" id="drp" onchange="chng_div('drp','div_to_chng');">
        <option value="100">100 Pixels</option>
        <option value="200">200 Pixels</option>
        <option value="350">350 Pixels</option>
        <option value="450">450 Pixels</option>
        <option value="500">600 Pixels</option>
    </select>

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

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

    </div>


</body>
</html>
  • this is just an example, please do not use inline CSS styles ever long term it would cost you too much.

Post a Comment for "Change The Size Of Div By Selecting Value From The Dropdown"