如何根据另一个字段的值设置输入字段值？

西蒙·J

字段 1 [attribute_size]
下拉菜单值：小、中、大、特大

字段 2 [count]
输入文本值：根据字段 1 输入设置值，基于以下映射

小号 = 1
中号 = 2
大号 = 3
特大号 = 4

<select id="size" class="" name="attribute_size" data-attribute_name="attribute_size" data-show_option_none="yes"><option value="">Choose an option</option><option value="Small" class="attached enabled">Small</option><option value="Medium" class="attached enabled">Medium</option><option value="Large" class="attached enabled">Large</option><option value="Extra Large" class="attached enabled">Extra Large</option></select>

<input id="count" name="count" value="5" class="thwepo-input-field ">

我如何使用 JQuery 来实现这一点？每次更改字段 1 时，我都需要更新字段 2 的值。

斯科特·马库斯

您将在设置的上设置一个事件处理change程序：selectvalueinput

const $input = $("#size");
$input.change(function(){
  $("#count").val($(this).val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="size" class="" name="attribute_size" data-attribute_name="attribute_size" data-show_option_none="yes">
  <option value="">Choose an option</option>
  <option value="1" class="attached enabled">Small</option>
  <option value="2" class="attached enabled">Medium</option>
  <option value="3" class="attached enabled">Large</option>
  <option value="4" class="attached enabled">Extra Large</option>
</select>

<input id="count" name="count" value="5" class="thwepo-input-field ">

但是，关于这件事有几点：

input字段就是这样，用户输入的元素。如果您只需要显示信息，则不应使用input元素，而应仅设置textContent普通元素的（如 aspan或div）。
如果你希望valuean的与的文本option相同，则根本不需要指定的属性——文本将成为值。但是，在您的情况下，您已经说过您希望数字是不同s 的值，因此属性应该反映这一点。
optionvalueoptionoptionvalue
您所询问的场景非常简单，而 JQuery 可能无法完成它。下面是 vanilla JavaScript 的代码：

const input = document.getElementById("count");
document.getElementById("size").addEventListener("change", function(){
  input.value = this.value;
});

<select id="size" class="" name="attribute_size" data-attribute_name="attribute_size" data-show_option_none="yes">
  <option value="">Choose an option</option>
  <option value="1" class="attached enabled">Small</option>
  <option value="2" class="attached enabled">Medium</option>
  <option value="3" class="attached enabled">Large</option>
  <option value="4" class="attached enabled">Extra Large</option>
</select>

<input id="count" name="count" value="5" class="thwepo-input-field ">

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。