第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

如何根據(jù) 2 個(gè)下拉選項(xiàng)更改圖像 src 屬性？

如何根據(jù) 2 個(gè)下拉選項(xiàng)更改圖像 src 屬性？

慕沐林林 2023-07-14 09:47:37
我對(duì)下面的代碼有疑問(wèn)。我想做的是在提交表單之前根據(jù)在兩個(gè)下拉選項(xiàng)中選擇的內(nèi)容預(yù)覽圖像。$(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貢獻(xiàn)1841條經(jīng)驗(yàn) 獲得超3個(gè)贊

如果你有 jQuery，請(qǐng)使用它


在這里，我使用一個(gè)對(duì)象來(lái)匹配選擇，并使用公共類來(lái)允許更改任一下拉列表


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

  })

});

<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="">Please select</optopn>

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

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

    <option value="C">C</option>

</select>


<select class="form-image1" id="option2" name="option2">

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

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

  <option value="2">2</option>

  <option value="3">3</option>

</select>

至于錯(cuò)誤：

您遇到了括號(hào)問(wèn)題。

  )   
};

應(yīng)該

    } 
  }); 
});

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

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


查看完整回答
反對(duì) 回復(fù) 2023-07-14
?
侃侃無(wú)極

TA貢獻(xiàn)2051條經(jīng)驗(yàn) 獲得超10個(gè)贊

$('#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');

  })

});

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


查看完整回答
反對(duì) 回復(fù) 2023-07-14
  • 2 回答
  • 0 關(guān)注
  • 203 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)