Question

我想根据选择的两个选择值来更改图像。如何通过两个单独的选择动态完成？到目前为止，这是我的代码。

HTML

<img class="prime" src="images/image_small.jpg">
<form>
Select image size:
<select onchange="twoselects(this)">
<option value="opt1">opt1</option>
<option value="opt2">opt2</option>
<option value="opt3">opt3</option>
</select>
</form>
Select image size:
<select onchange="twoselects(that)">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
<p id="optimus"></p>

的Javascript

function twoselects(val, val2) {
// Not sure why you used this line
var image = document.querySelector(".prime").value;

var getValue = val.value;
var getValue2 = val2.value;

if (getValue == "opt1" && "option1") {
 document.getElementById('optimus').style.backgroundImage= "url('http://www.orderofinterbeing.org/wp-content/uploads/2014/04/light-forest.jpg')"; 
 }

else if (getValue == "opt2" && getValue2 == "option2") {
 document.getElementById('optimus').style.backgroundImage= "url('http://freebigpictures.com/wp-content/uploads/2009/09/coniferous-forest.jpg')"; 
}
}

Answer 1

你发送一个参数但是接受2..i会建议你不要发送和接受任何参数。使用getElementById或querySelector

选择元素提供示例中的

that为undefined。

＆＃13;

function twoselects() {
  var size1 = document.querySelector("#size1");
  var size2 = document.querySelector("#size2");
  var getValue = size1.value;
  var getValue2 = size2.value;
  if (getValue == "opt1" && getValue2 == "option1") {
    document.getElementById('optimus').style.backgroundImage = "url('http://www.orderofinterbeing.org/wp-content/uploads/2014/04/light-forest.jpg')";
  } else if (getValue == "opt2" && getValue2 == "option2") {
    document.getElementById('optimus').style.backgroundImage = "url('http://freebigpictures.com/wp-content/uploads/2009/09/coniferous-forest.jpg')";
  }
}
twoselects();

＆＃13;

p {
  width: 100%;
  height: 200px;
}

＆＃13;

<img class="prime" src="images/image_small.jpg">
<form>
  Select image size:
  <select id='size1' onchange="twoselects()">
    <option value="opt1">opt1</option>
    <option value="opt2">opt2</option>
    <option value="opt3">opt3</option>
  </select>
</form>
Select image size:
<select id='size2' onchange="twoselects()">
  <option value="option1">option1</option>
  <option value="option2">option2</option>
  <option value="option3">option3</option>
</select>
<p id="optimus"></p>

＆＃13;

将多个选择值传递给函数以更新图像

1 个答案: