时间戳

首页 > 解决方案 > Javascript：当用户手动更改值时更新下拉列表

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

问题描述

作为对我的项目的参考：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>

标签： jquerydropdown

解决方案

希望这会有所帮助

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

推荐阅读