Change The Size Of Div By Selecting Value From The Dropdown
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);
functionchangeSize() {
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>functionchng_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><selectname="sizi_pixel"id="drp"onchange="chng_div('drp','div_to_chng');"><optionvalue="100">100 Pixels</option><optionvalue="200">200 Pixels</option><optionvalue="350">350 Pixels</option><optionvalue="450">450 Pixels</option><optionvalue="500">600 Pixels</option></select><divstyle="border-width:3px;border-style:solid;border-color:#ff9900; height:400px; width:300px"id="div_to_chng"><inputclass="color"value="999"><inputclass="color"value="999"><inputclass="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"