将 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) {&nbsp; 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">&nbsp; <h4 data-name="product_name" id="name">Product Name</h4>&nbsp; <p data-name="product_desc">Yellow</p>&nbsp; <hr class="line">&nbsp; <div class="form-group">&nbsp; &nbsp; <label>Size: </label>&nbsp; &nbsp; <select id="dropdown" name="product_size" class="form-control input-sm">&nbsp; &nbsp; &nbsp; <option>Iphone 11 6.1</option>&nbsp; &nbsp; &nbsp; <option>IPhone 11 Pro 5.8</option>&nbsp; &nbsp; &nbsp; <option>Iphone 11 Pro Max 6.5</option>&nbsp; &nbsp; &nbsp; <option>Iphone X</option>&nbsp; &nbsp; &nbsp; <option>Iphone XS</option>&nbsp; &nbsp; &nbsp; <option>Iphone XS Max</option>&nbsp; &nbsp; &nbsp; <option>Iphone XR</option>&nbsp; &nbsp; &nbsp; <option>Iphone 7</option>&nbsp; &nbsp; &nbsp; <option>Iphone 8</option>&nbsp; &nbsp; &nbsp; <option>Iphone 7 Plus</option>&nbsp; &nbsp; &nbsp; <option>Iphone 8 Plus</option>&nbsp; &nbsp; &nbsp; <option>Iphone 6</option>&nbsp; &nbsp; &nbsp; <option>Iphone 6s</option>&nbsp; &nbsp; &nbsp; <option>Iphone 6 Plus</option>&nbsp; &nbsp; &nbsp; <option>Iphone 6s Plus</option>&nbsp; &nbsp; </select>&nbsp; </div></div>