Javascript：当用户手动更改值时更新下拉列表

Question

作为我项目的参考：https://koppenleitner.de/print/

在“Ausgabeformat”标签下方，您可以看到一个下拉菜单。有预选格式可供选择，但当有人更改“Breite”和“Höhe”中的值时，我想将下拉元素更改为“Eigener Wert”。我怎样才能做到这一点。

    <label for="formatInput">Ausgabeformat</label>
    <form action="/revenue_lines/lock" id="outGroup" method="post" accept-charset="utf-8">
      <div style="display:none;">
        <input type="hidden" name="_method" value="POST">
      </div>
      <select name="formatInput" class="form-group" id="formatInput">
        <option value="210_297">Eigener Wert</option>
        <option value="210_297">DIN A4 Hochformat</option>
        <option value="297_420">DIN A3 Hochformat</option>
        <option value="420_594">DIN A2 Hochformat</option>
        <option value="594_841">DIN A1 Hochformat</option>
        <option value="841_1189">DIN A0 Hochformat</option>
        <option value="297_210">DIN A4 Querformat</option>
        <option value="420_297">DIN A3 Querformat</option>
        <option value="594_420">DIN A2 Querformat</option>
        <option value="841_594">DIN A1 Querformat</option>
        <option value="1189_841">DIN A0 Querformat</option>
      </select></p>
  </div>
</div>
<div class="col-md-2">
  <div class="form-group" id="widthGroup">
    <label for="widthInput">Breite</label>
    <input name="width" class="form-control" type="text" id="widthInput">
  </div>
</div>
<div class="col-md-2">
  <div class="form-group" id="heightGroup">
    <label for="heightInput">Höhe</label>
    <input name="heigth" class="form-control" type="text" id="heightInput">
  </div>
</div>

这是使用下拉菜单预选某些内容时更新文本字段的 jquery 代码：

  <script>
    $('#formatInput').on('change', function () {
      var val = this.value;
      var parts = val.split("_");
      $('#widthInput').val(parts[0]);
      $('#heightInput').val(parts[1]);
    });
  </script>

Answer 1

希望这会有所帮助

$('#widthInput , #heightInput').change(function(){
    $('#formatInput').val('210_297');
});

Answer 2

如果下拉值是固定的，那么您可以执行以下操作：

$('#widthInput').on('change', function() {
$('#formatInput').val('210_297');
});

$('#heightInput').on('change', function() {
$('#formatInput').val('210_297');
});

或者你也可以合并：

$('#widthInput, #heightInput').on('change', function() {
$('#formatInput').val('210_297');
});

否则，如果选项顺序也固定，那么您可以选择下拉列表的第一个选项：

$('#widthInput, #heightInput').on('change', function() {
$("#formatInput").val($("#formatInput option:first").val());
});