通过 id 获取选项值适用于 chrome 而不是 mozilla

Question

我想在价格字段中插入从最大尺寸字段中选择的选项的值。这适用于 chrome 但不适用于 Mozilla。我一直在试图找出原因，但没有成功。

<div class="form-group"><label class="sr-only" for="id_max_size">Max 
   Size</label><select name="max_size" title="" required class="form-control" id="id_max_size">
   <option value="" disabled selected>Size ↓</option>
   <option value="10">AAA</option>
   <option value="20">BBB</option>
   <option value="30">CCC</option>
   <option value="40">DDD</option>
</select>

document.getElementById('id_max_size').onchange = function () {
    document.getElementById('id_price').value = event.target.value  
};;

如何让它与 Mozila 一起工作？我错过了什么？

Answer 1

您可以将代码更改为以下内容，它会起作用。您可以添加 change EventListener 并将 event 作为参数传递。

document.getElementById('id_max_size').addEventListener("change", function (event) {
    document.getElementById('id_price').value = event.target.value;
});

<div class="form-group">
  <label class="sr-only" for="id_max_size">Max 
  Size</label>

  <select name="max_size" title="" required class="form-control" id="id_max_size">
    <option value="" disabled selected>Size ↓</option>
    <option value="10">AAA</option>
    <option value="20">BBB</option>
    <option value="30">CCC</option>
    <option value="40">DDD</option>
  </select>

  <input id="id_price" value="" />
</div>

通过 id 获取选项值适用于 chrome 而不是 mozilla

Get Option value by id works in chrome and not mozilla

html

javascript

jquery

mozilla

google-chrome