通过从下拉列表中选择值来更改div的大小
[英]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 suppose i selct 350px then the size of the div should automatically adjust accordingly. 
我有一个下拉菜单，其中有一个像素值，下面是一个包含一些数据的div，并且div具有一定的宽度和高度，但是我需要做的是，当我选择任何值时，假设我选择了350px，然后div应该自动进行相应的调整。 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. 在过去的一个小时内，我正在为它或Google上的任何帮助服务。
here is the html 这是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
<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 个解决方案
解决方案1
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. 给您的div一个ID，并为列表视图的change事件添加一个事件侦听器。 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 您必须在页面中包含jquery并修改列表的值以匹配宽度
解决方案2
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/ Jsfiddle演示版： 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. 这只是一个例子，请不要长期使用内联CSS样式，否则会花费太多。
解决方案3
0 已采纳 2012-09-28 20:32:30
This javascript should do the trick! 这个javascript应该可以解决问题！
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'. 并给您的div一个ID，我给它一个ID'myDiv'。
you can also see it working here: http://jsfiddle.net/6avqc/1/ 您还可以在这里看到它的工作： 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';
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.