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

Question

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

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..我建议你不要发送和接受任何参数。 Select 个元素使用 getElementById 或 querySelector

that 在提供的示例中是 undefined。

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();

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

<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>

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

Pass multiple select values to a function to update an image

javascript

select

image

function

updates