作为对我的项目的参考: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>
希望这会有所帮助
$('#widthInput , #heightInput').change(function(){
$('#formatInput').val('210_297');
});
如果下拉列表值是固定的,则可以执行以下操作:
$('#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());
});