将 html 内容更改为所选选项

Question

我一直在尝试将我的产品名称的值更改为当前的值+尺寸名称，但我无法做到这一点。我尝试使用HTML <select> 选项用 HTML 内容填充文本区域，但失败了。这是 HTML，我正在尝试将产品名称更改为产品名称 + 从选项中选择的任何选项。我尝试过这个，但似乎没有改变任何东西。var text = document.getElementById('name');var drop = document.getElementById('dropdown');drop.addEventListener('change', function(e) {  text.value += ' ' + e.target.value;  //OR ` ${e.target.value}`})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><!-- BEGIN PRODUCTS --><div class="col-md-4 col-sm-6">  <div class="sc-product-item thumbnail">    <div class="caption">      <h4 id="name" data-name="product_name">Product Name</h4>      <p data-name="product_desc">Yellow</p>      <hr class="line">      <div>        <div class="form-group">          <label>Size: </label>          <select id="dropdown" name="product_size" class="form-control input-sm">            <option>Iphone 11 6.1</option>            <option>IPhone 11 Pro 5.8</option>            <option>Iphone 11 Pro Max 6.5</option>            <option>Iphone X</option>            <option>Iphone XS</option>            <option>Iphone XS Max</option>            <option>Iphone XR</option>            <option>Iphone 7</option>            <option>Iphone 8</option>            <option>Iphone 7 Plus</option>            <option>Iphone 8 Plus</option>            <option>Iphone 6</option>            <option>Iphone 6s</option>            <option>Iphone 6 Plus</option>            <option>Iphone 6s Plus</option>          </select>        </div>

Answer 1

提供您的 JS 元素 ID，然后更改text.value为text.textContent. 另外，请确保每次都替换文本，而不是添加文本（即text.textContent = 'Product Name: ' + ...）：

var text = document.getElementById('name')

var drop = document.getElementById('dropdown')

drop.addEventListener('change', function(e) {

  text.textContent = 'Product Name: ' + e.target.value

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="caption">

  <h4 data-name="product_name" id="name">Product Name</h4>

  <p data-name="product_desc">Yellow</p>

  <hr class="line">

  <div class="form-group">

    <label>Size: </label>

    <select id="dropdown" name="product_size" class="form-control input-sm">

      <option>Iphone 11 6.1</option>

      <option>IPhone 11 Pro 5.8</option>

      <option>Iphone 11 Pro Max 6.5</option>

      <option>Iphone X</option>

      <option>Iphone XS</option>

      <option>Iphone XS Max</option>

      <option>Iphone XR</option>

      <option>Iphone 7</option>

      <option>Iphone 8</option>

      <option>Iphone 7 Plus</option>

      <option>Iphone 8 Plus</option>

      <option>Iphone 6</option>

      <option>Iphone 6s</option>

      <option>Iphone 6 Plus</option>

      <option>Iphone 6s Plus</option>

    </select>

  </div>

</div>