Javascript: обновление выпадающего списка, когда пользователь меняет значения вручную - PullRequest
Новая
       8

Javascript: обновление выпадающего списка, когда пользователь меняет значения вручную

0 голосов
/ 20 апреля 2020

как ссылка на мой проект: https://koppenleitner.de/print/

Под надписью «Ausgabeformat» вы можете увидеть выпадающее меню. Есть заранее выбранные форматы на выбор, но я хочу изменить выпадающий элемент на «Eigener Wert», когда кто-то меняет значения в «Breite» и «Höhe». Как я могу добиться этого. 

    <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>

Ответы [ 2 ]

0 голосов
/ 20 апреля 2020

Если значения раскрывающегося списка фиксированы, вы можете сделать это следующим образом: 

$('#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());
});
0 голосов
/ 20 апреля 2020

Надеюсь, это поможет 

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