change the size of div by selecting value from the dropdown
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
3 answers
solution1
0 2012-09-28 20:11:09
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
solution2
0 2012-09-28 20:16:15
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.
solution3
0 ACCPTED 2012-09-28 20:32:30
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';
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.