2 带有 Jquery 的表单

Question

在同一页面我有 2 个表格，我希望能够修改表格 1，并且修改出现在表格 2 中，Vice-Versa（双向）。

“数量”的输入字段可以正常工作，但是 2 Select 菜单有问题。

如您所见，我使用OnPress 表示数量，因为onChange 不起作用！

$("#Quantity").change(function() {
  $("#Quantity_2").val($(this).val());
});
$("#Quantity_2").change(function() {
  $("#Quantity").val($(this).val());
});

$("#SingleOptionSelector_0").change(function() {
  $("#SingleOptionSelector_0_2").val($(this).val());
});
$("#SingleOptionSelector_0_2").change(function() {
  $("#SingleOptionSelector_0").val($(this).val());
});

$("#SingleOptionSelector_1").change(function() {
  $("#SingleOptionSelector_1_2").val($(this).val());
});
$("#SingleOptionSelector_1_2").change(function() {
  $("#SingleOptionSelector_1").val($(this).val());
});

function updateQuantity_2(val) {
  $("#Quantity").val(val);
  $("#Quantity").trigger('change');
}

function updateQuantity(val) {
  $("#Quantity_2").val(val);
  $("#Quantity_2").trigger('change');
}

function updateSingleOptionSelector_0_2(val) {
  $("#SingleOptionSelector_0 option:selected").val(val);
  $("#SingleOptionSelector_0 option:selected").trigger('change');
}

function updateSingleOptionSelector_0(val) {
  $("#SingleOptionSelector_0_2 option:selected").val(val);
  $("#SingleOptionSelector_0_2 option:selected").trigger('change');
}

function updateSingleOptionSelector_1_2(val) {
  $("#SingleOptionSelector_1 option:selected").val(val);
  $("#SingleOptionSelector_1 option:selected").trigger('change');
}

function updateSingleOptionSelector_1(val) {
  $("#SingleOptionSelector_1_2 option:selected").val(val);
  $("#SingleOptionSelector_1_2 option:selected").trigger('change');
}

<form action="/cart/add" method="post" enctype="multipart/form-data" data-section="{{ section.id }}">
  <select onChange="updateSingleOptionSelector_0_2()" id="SingleOptionSelector_0" data-index="option{{ forloop.index }}">
    {% for value in option.values %}
      <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
    {% endfor %}
  </select>
  <select onChange="updateSingleOptionSelector_1_2()" id="SingleOptionSelector_1" data-index="option{{ forloop.index }}">
    {% for value in option.values %}
      <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
    {% endfor %}
  </select>
  <select name="id" id="ProductSelect-{{ section.id }}" data-section="{{ section.id }}" class="product-form__variants no-js">
    {% for variant in product.variants %}
      {% if variant.available %}
        <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">
          {{ variant.title }}
        </option>
      {% else %}
        <option disabled="disabled">{{ variant.title }} - {{ 'products.product.sold_out' | t }}</option>
      {% endif %}
    {% endfor %}
  </select>
  <label for="Quantity">{{ 'products.product.quantity' | t }}</label>
  <input type="number" id="Quantity_2" onPress="updateQuantity()" name="quantity" value="1" min="1" class="product-form__input" pattern="[0-9]*">
  <button type="submit" name="add" id="AddToCart-{{ section.id }}">ADD TO CART</button>
</form>

<form action="/cart/add" method="post" enctype="multipart/form-data" data-section="{{ section.id }}">
  <select onChange="updateSingleOptionSelector_0()" id="SingleOptionSelector_0_2" data-index="option{{ forloop.index }}">
    {% for value in option.values %}
      <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
    {% endfor %}
  </select>
  <select onChange="updateSingleOptionSelector_1()" id="SingleOptionSelector_1_2" data-index="option{{ forloop.index }}">
    {% for value in option.values %}
      <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
    {% endfor %}
  </select>
  <select name="id" id="ProductSelect-{{ section.id }}" data-section="{{ section.id }}" class="product-form__variants no-js">
    {% for variant in product.variants %}
      {% if variant.available %}
        <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} value="{{ variant.id }}">
          {{ variant.title }}
        </option>
      {% else %}
        <option disabled="disabled">{{ variant.title }} - {{ 'products.product.sold_out' | t }}</option>
      {% endif %}
    {% endfor %}
  </select>
  <label for="Quantity">{{ 'products.product.quantity' | t }}</label>
  <input type="number" id="Quantity_2" onPress="updateQuantity()" name="quantity" value="1" min="1" class="product-form__input" pattern="[0-9]*">
  <button type="submit" name="add" id="AddToCart-{{ section.id }}">ADD TO CART</button>
</form>

Answer 1

首先你调用updateSingleOptionSelector_0_2() 没有值，我认为你在那里抛出一个错误。这可能是其他侦听器不起作用的原因。

另一方面，更改功能按预期工作。

$('#first').change(function(){
	$('#second').val($(this).val())
});
$('#second').change(function(){
	$('#first').val($(this).val())
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="first" class="select">
<option value="1">1 Option</option>
<option value="2">2 Option</option>
<option value="3">3 Option</option>
<option value="4">4 Option</option>
</select>

<select id="second" class="select">
<option value="1">1 Option</option>
<option value="2">2 Option</option>
<option value="3">3 Option</option>
<option value="4">4 Option</option>
</select>