我得到了以下代码,我希望我的i变量可以被select值读取,然后每次我更改select值时都会将新值添加到旧值,但我不知道为什么它不起作用
var tamany = document.getElementById('tam');
var i = document.getElementById('tam').value
var ancho = "300";
var largo = "300px";
var cc = parseInt(ancho) + parseInt(i);
function aa() {
document.getElementById("change").style.width = (cc + '+px+');
document.getElementById("change").style.height = (largo);
})

ul {
margin-top: -700px;
}
#man {
z-index: 500;
}
#pantalon {
position: absolute;
margin-top: 400px;
margin-left: -500px;
z-index: -1;
}
#change {
position: absolute;
margin-top: 100px;
z-index: -2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="man" src="man.png" height="900">
<img id="pantalon" src="http://static.bershka.net/4/photos2/2015/I/0/2/p/5337/506/594/5337506594_1_2_4.jpg?t=ts" height="500">
<img id="change" src="http://static.pullandbear.net/2/photos/2015/I/0/2/p/9592/500/800/9592500800_2_1_1.jpg?timestamp=1437741171705" height="500" width="500">
<button onclick="aa()">Cambiar</button>
<select id="tam" name="tam1">
<option value="none"></option>
<option value="100">100</option>
<option value="200">-100</option>
</select>
&#13;
答案 0 :(得分:0)
var staticGeo = new ol.source.GeoJSON(({
object: {
type: 'Feature Collection',
crs: {
type: 'name',
properties: {name: 'EPSG:4326'}
},
features: [{
type: 'Feature',
geometry: {
type: 'Point',
coordinates: [0,0]
}
}]
},
projection: 'EPSG:3857'
}));
var vectorSource = new ol.source.Vector({
source: staticGeo
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255,255,255,0.2)'
}),
stroke: new ol.style.Stroke({
color: 'blue',
width: 1
})
})
})
this.map.addLayer(vectorLayer);
这就是获取所选选项值的方法。要在用户选择选项时更新var i = tamany.options[tamany.selectedIndex].value;
变量,请使用i
事件。
答案 1 :(得分:0)
您可以尝试使用onchange()
事件,这意味着每次更改下拉列表的值时,都会触发此函数,以便您可以将新值添加到较旧的值。
答案 2 :(得分:0)
几个问题:
其一,您在页面加载时设置i
和cc
。您需要在aa()
中设置它们,以便从菜单中获取当前选择。
其次,您将'+px+'
连接到cc
而不是px
,这会创建无效的宽度。
第三,在)
函数之后,你有一个额外的aa()
。
var tamany = document.getElementById('tam');
var ancho = "300";
var largo = "300px";
function aa() {
var i = tamany.value
var cc = parseInt(ancho) + parseInt(i);
document.getElementById("change").style.width = (cc + 'px');
document.getElementById("change").style.height = (largo);
}
ul {
margin-top: -700px;
}
#man {
z-index: 500;
}
#pantalon {
position: absolute;
margin-top: 400px;
margin-left: -500px;
z-index: -1;
}
#change {
position: absolute;
margin-top: 100px;
z-index: -2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="man" src="man.png" height="900">
<img id="pantalon" src="http://static.bershka.net/4/photos2/2015/I/0/2/p/5337/506/594/5337506594_1_2_4.jpg?t=ts" height="500">
<img id="change" src="http://static.pullandbear.net/2/photos/2015/I/0/2/p/9592/500/800/9592500800_2_1_1.jpg?timestamp=1437741171705" height="500" width="500">
<button onclick="aa()">Cambiar</button>
<select id="tam" name="tam1">
<option value="none"></option>
<option value="100">100</option>
<option value="200">-100</option>
</select>