除了 "value" 之外，如何通过其他 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/option 个元素select 图像 src 的脚本

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

在不改变值“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');
  }
}

我想知道是否可以创建一个函数来响应 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") ? ".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>[=12=].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>

除了 "value" 之外，如何通过其他 select 选项下拉列表在 <h4> 标签中添加元素，因为我已经使用过它，这可能吗？”

how to add an element in <h4> tag through other select option dropdown apart from "value" because I already used it, is It possible?"

html

javascript

jquery

vanilla-forums