根據<select>元素中的<optionvalue>顯示影像-有解無憂

在過去的兩天里，我一直在努力創建一個選項，當用戶從“select>”元素中選擇一個值后單擊“提交”按鈕，該元素是顯示影像的網站。

        <label for="cars" id="carInput" name="carInput">
        <select id="modelsList">
            <option value="mba">Mercedes-Benz A Class</option>
            <option value="mbc">Mercedes-Benz C Class</option>
            <option value="mbe">Mercedes-Benz E Class</option>
            <option value="mbs">Mercedes-Benz S Class</option>
            <option value="mbeq">Mercedes-Benz EQE Class</option>
            <option value="mbeqs">Mercedes-Benz EQS Class</option>
        </select>
        <button id="btn">submit</button>

我在 Javascript 中嘗試過類似的操作，但是每次單擊提交按鈕時，它都會添加一個新影像，我真的不希望這樣，我希望每次選擇一個值時影像都會改變。

document.querySelector('#btn').addEventListener('click', submit);
    function submit() {
        let select = document.querySelector('#modelsList');
        let value = select.options[select.selectedIndex].value;
        let container = document.querySelector('.container');
 
  const aImg = document.createElement("img");
  const cImg = document.createElement("img");
  const eImg = document.createElement("img");
  const sImg = document.createElement("img");
  const eqImg = document.createElement("img");
  const eqeImg = document.createElement("img");
  aImg.src = "https://ag-spots-2021.o.auroraobjects.eu/2021/07/26/mercedes-amg-cla-45-c117-c479326072021173956_1.jpg?1627314027"
  cImg.src = "https://ireland.apollo.olxcdn.com/v1/files/eyJmbiI6IjM1bXk3dTVtcTd1OC1BVVRPVklUUk8iLCJ3IjpbeyJmbiI6InE3bXo1M2JpZnB6ay1BVVRPVklUUk8iLCJzIjoiMTYiLCJwIjoiMTAsLTEwIiwiYSI6IjAifV19.dxCeoriV-0ygVtEXaXgFFvuomnzNmndAS1G5qVVYqaM/image;s=1080x720"
  eImg.src = "https://ireland.apollo.olxcdn.com/v1/files/eyJmbiI6IjdjYzZ2cm84NjNrcS1BVVRPVklUUk8iLCJ3IjpbeyJmbiI6InE3bXo1M2JpZnB6ay1BVVRPVklUUk8iLCJzIjoiMTYiLCJwIjoiMTAsLTEwIiwiYSI6IjAifV19.5PJ743A4FPdZuZkRpYhJh9g96i1AASth2X4nBJXS0oU/image;s=644x461"
  sImg.src = "https://ireland.apollo.olxcdn.com/v1/files/eyJmbiI6InM1NnM5ZndkYTR4dC1BVVRPVklUUk8iLCJ3IjpbeyJmbiI6InE3bXo1M2JpZnB6ay1BVVRPVklUUk8iLCJzIjoiMTYiLCJwIjoiMTAsLTEwIiwiYSI6IjAifV19.1N_EW-jPwI1Q33sSuwaIdYxTexUdYAHcWgEFYCPqkrU/image;s=1080x720"
  eqImg.src = "https://www.cars-data.com/pictures/mercedes/mercedes-benz-g-class_4266_24.jpg"
  eqeImg.src = "https://mercedesblog.com/wp-content/uploads/2019/06/mercedes-eqe.jpg"

     if (value === 'mba') {
         container.appendChild(aImg);
     } else if (value === 'mbc') {
         container.appendChild(cImg)
    } else if (value === 'mbe') {
         container.appendChild(eImg);
     } else if (value === 'mbs') {
         container.appendChild(sImg);
     } else if (value === 'mbeq') {
         container.appendChild(eqImg);
     } else {
         container.appendChild(eqeImg);
     }
 }

還有一個額外的問題：當單擊提交按鈕時，如何實際注入帶有 3 個 flex 子項（一個 img、段落和一個小 div）的整個 div 容器？

uj5u.com熱心網友回復：

首先嘗試從容器中洗掉所有子節點：

function removeAllChildNodes(parent) {
    while (parent.firstChild) {
        parent.removeChild(parent.firstChild);
    }
}
const container = document.querySelector('#container');
removeAllChildNodes(container);

uj5u.com熱心網友回復：

您可以在添加之前從容器中洗掉所有內容：

function submit() {
        let select = document.querySelector('#modelsList');
        let value = select.options[select.selectedIndex].value;
        let container = document.querySelector('.container');
        container.innerHTML = '';
[...]

或者您可以在不附加新影像的情況下更改影像的 src

document.querySelector('#btn').addEventListener('click', submit);

const images = {
    mba:'https://ag-spots-2021.o.auroraobjects.eu/2021/07/26/mercedes-amg-cla-45-c117-c479326072021173956_1.jpg?1627314027',
    mbc:'https://ireland.apollo.olxcdn.com/v1/files/eyJmbiI6IjM1bXk3dTVtcTd1OC1BVVRPVklUUk8iLCJ3IjpbeyJmbiI6InE3bXo1M2JpZnB6ay1BVVRPVklUUk8iLCJzIjoiMTYiLCJwIjoiMTAsLTEwIiwiYSI6IjAifV19.dxCeoriV-0ygVtEXaXgFFvuomnzNmndAS1G5qVVYqaM/image;s=1080x720',
    mbe:'https://ireland.apollo.olxcdn.com/v1/files/eyJmbiI6IjdjYzZ2cm84NjNrcS1BVVRPVklUUk8iLCJ3IjpbeyJmbiI6InE3bXo1M2JpZnB6ay1BVVRPVklUUk8iLCJzIjoiMTYiLCJwIjoiMTAsLTEwIiwiYSI6IjAifV19.5PJ743A4FPdZuZkRpYhJh9g96i1AASth2X4nBJXS0oU/image;s=644x461',
    mbs:'https://www.cars-data.com/pictures/mercedes/mercedes-benz-g-class_4266_24.jpg',
    mbeq:'https://www.cars-data.com/pictures/mercedes/mercedes-benz-g-class_4266_24.jpg',
    default:'https://mercedesblog.com/wp-content/uploads/2019/06/mercedes-eqe.jpg'
}

function submit() {
    let select = document.querySelector('#modelsList');
    let value = select.options[select.selectedIndex].value;
    let container = document.querySelector('.container');

    const img = document.querySelector('#img');

    if(images.hasOwnProperty(value)) {
        img.setAttribute('src', images[value]);
    } else {
        img.setAttribute('src', images.default);
    }
}

<label for="cars" id="carInput" name="carInput"/>
<select id="modelsList">
    <option value="mba">Mercedes-Benz A Class</option>
    <option value="mbc">Mercedes-Benz C Class</option>
    <option value="mbe">Mercedes-Benz E Class</option>
    <option value="mbs">Mercedes-Benz S Class</option>
    <option value="mbeq">Mercedes-Benz EQE Class</option>
    <option value="mbeqs">Mercedes-Benz EQS Class</option>
</select>
<button id="btn">submit</button>
<div class="container">
    <img id="img"/>
</div>

uj5u.com熱心網友回復：

我建議改變你對 HTML 和 JS 之間關系的看法。前者是表示層，后者是邏輯層。如果可以的話，在業務邏輯中包含表示資訊是沒有意義的。現在，如果您想更改其select作業方式（例如，添加新影像或更改現有影像），您必須更改 JS 以及 HTML。

您可以將代碼更改為以下內容：

document.querySelector('#btn').addEventListener('click', submit);
    function submit() {
        let select = document.querySelector('#modelsList');
        let value = select.options[select.selectedIndex].value;
        let containerImg = document.querySelector('#container-img');

        containerImg.hidden = false;
        containerImg.src = value;
 }

這允許您添加任意數量的未來影像選項，而無需觸摸代碼。這對 HTML 做了一些假設。您必須像這樣更改它：

<label for="cars" id="carInput" name="carInput">
<select id="modelsList">
        <option value="image1.png">Mercedes-Benz A Class</option>
        <option value="image2.png">Mercedes-Benz C Class</option>
</select>
<button id="btn">submit</button>
</label>
<div class="container">
        <img hidden src="" id="container-img" />
</div>

uj5u.com熱心網友回復：

添加這個 div 元素。

<div id="container"></div>

更改容器變數。

let container = document.getElementById('container');

在 if 陳述句之前添加 innerHTML 方法。

 container.innerHTML=""; //<-------------- This will clear your div before appending your new image 
 if (value === 'mba') {         //Note: I have not changed the if statement
     container.appendChild(aImg);
 } else if (value === 'mbc') {
     container.appendChild(cImg)
} else if (value === 'mbe') {
     container.appendChild(eImg);
 } else if (value === 'mbs') {
     container.appendChild(sImg);
 } else if (value === 'mbeq') {
     container.appendChild(eqImg);
 } else {
     container.appendChild(eqeImg);
 }

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/481420.html

標籤：javascript html 功能

上一篇：ReactHOC：將資料屬性傳遞給包裝組件的第一個子/元素

下一篇：如何根據ID渲染陣列的特定元素onClick按鈕