2017-10-20 119 views
1

在同一頁面我有兩種形式,我希望能夠修改表單1,修改出現在表單2副本(兩種方式)中。2 Jquery的形式

它對於「數量」的輸入字段工作正常,但我有問題與2選擇菜單。

正如你所看到的,我使用了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> 
+3

請格式化你的HTML代碼(使用計劃),這是很難在當前狀態下讀取代碼。 –

+0

從選擇器中刪除'option:selected'。 –

回答

1

首先調用updateSingleOptionSelector_0_2()沒有價值,我想你拋出的錯誤。這可能是其他聽衆無法工作的原因。

另一方面,更改函數按預期工作。

$('#first').change(function(){ 
 
\t $('#second').val($(this).val()) 
 
}); 
 
$('#second').change(function(){ 
 
\t $('#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>