如何在其中添加一个元素<h4>通过除“值”之外的其他 select 选项下拉列表进行标记，因为我已经使用过它，这可能吗？”</h4>

Question

这是我的 JS 和 HTML：

<div class="col-2">
    <p> Small Frame</p>
    <h1>Name of Frame1</h1>
    <h4 id='out'></h4>
    <select id='rename' onchange="setImage(this);">
        <option disabled selected value>--Opciones--</option>
        <option id='frame' value="../assets/8.png">Frame</option>
        <option id='noframe' value="../noframe/8.png">No Frame</option>
    </select>
</div>

使用选择/选项元素编写 select 图像 src 的脚本

function setImage(select){
  var image = document.getElementsByName("image-swap")[0];
  image.src = select.options[select.selectedIndex] .value;
}

更改 output 而不更改值“img.src”的脚本

$('#rename').on('change', getContent);
function getContent(e){var opt = this.value;
  if (opt === 'frame'){
    $('#out').html('<h4>$/.50.00</h4>');
  } else {
    //(opt === 'noframe')
    $('#out').html('<h4>$/.40.00</h4');
  }
}

我想知道是否有可能制作一个 function 来响应 slect/options 元素中的更改以将价格插入元素外部，例如在 h4 元素中。

非常感谢每一位能够澄清我的疑问的程序员......

Answer 1

如果我理解正确，我认为这就是你想要做的：

 const myH4 = document.getElementById("my-h4"), mySelect = document.getElementById("my-select"), myImg = document.getElementsByName("my-img")[0]; mySelect.addEventListener("change", getContent); function getContent(){ const opt = mySelect.options[mySelect.selectedIndex]; myH4.textContent = (opt.id==="frame")? "$50.00": "40.00"; myImg.src = opt.value; myImg.nextElementSibling.textContent = ` <<< src="${opt.value}"`; // (For demo) }

 img{ width: 50px; height: 50px; margin-top: 10px; }

 <h4 id=my-h4>$0.00</h4> <select id="my-select"> <option disabled selected>--Opciones--</option> <option id='frame' value="../assets/8.png">Frame</option> <option id='noframe' value="../noframe/8.png">No Frame</option> </select> <div> <img name="my-img" /> <span></span> </div>