首頁猿問如何根據 2 個下拉選項更改圖像...

如何根據 2 個下拉選項更改圖像 src 屬性？

JavaScript

慕沐林林 2023-07-14 09:47:37

我對下面的代碼有疑問。我想做的是在提交表單之前根據在兩個下拉選項中選擇的內容預覽圖像。$(document).ready(function() { $('#form-image1').on('onchange', function() var option1 = document.getElementById("option1"); var option2 = document.getElementById("option2"); var option1selection = option1.options[option1.selectedIndex].value; var option2selection = option2.options[option2.selectedIndex].value; if (colourselection == "Blush " && patternselection == “Horizontal Stripes”) { $('#image1').attr('src', ‘https: //i.imgur.com/FHWSAJt.png’); ) };<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><img id="image1" src="https://www.w3schools.com/images/lamp.jpg" alt="Lamp" width="32" height="32" /><select class="form-image1" id="option1" name="option1"> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option></select><select class="form-image1" id="option2" name="option2"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option></select>

查看完整描述

2 回答

偶然的你

TA貢獻1841條經驗獲得超3個贊

如果你有 jQuery，請使用它

在這里，我使用一個對象來匹配選擇，并使用公共類來允許更改任一下拉列表

const images = {

"A1": "https://i.imgur.com/FHWSAJt.png",

"B1": "https://ih1.redbubble.net/image.1666904566.4117/flat,128x,075,f-pad,128x128,f8f8f8.jpg",

// ...

}

$(function() { // on page load

const defaultImage = $('#image1').attr('src'); // grab the image from the HTML

$('.form-image1').on('change', function() { // any of the selects

const opt1 = $("#option1").val();

const opt2 = $("#option2").val();

const image = images[`${opt1}${opt2}`] || defaultImage; // use default if not found

$('#image1').attr('src', image);

})

});

<option value="">Please select</optopn>

<option value="A">Blush</option>

<option value="B">Black</option>

</select>

<option value="">Please select</option>

<option value="1">Horizontal Stripes</option>

</select>

至于錯誤：

您遇到了括號問題。

  )   
};

應該

    } 
  }); 
});

.on("change")也不是.on("onchange")

最后$('#form-image1')是訪問 ID =“form-image1”的元素，但只有 CLASS =“form-image1”的元素，并且需要使用點來訪問$('.form-image1')

反對回復 2023-07-14

侃侃無極

TA貢獻2051條經驗獲得超10個贊

$('#form-image1').on('onchange', function()- 這里的form-image1id 不存在于 HTML 中，您還必須修改onchange為change.

$(document).ready(function() {

$('#option1').on('change', function() {

var option1 = document.getElementById("option1");

var option2 = document.getElementById("option2");

var option1selection = option1.options[option1.selectedIndex].value;

var option2selection = option2.options[option2.selectedIndex].value;

// Based on the condition update the image source

$('#image1').attr('src', 'https://i.imgur.com/FHWSAJt.png');

})

});

</select>

</select>

反對回復 2023-07-14

2 回答
0 關注
194 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何根據 2 個下拉選項更改圖像 src 屬性？

如何根據 2 個下拉選項更改圖像 src 屬性？

2 回答

添加回答

如何根據 2 個下拉選項更改圖像 src 屬性？

如何根據 2 個下拉選項更改圖像 src 屬性？