使用jquery點擊事件觸發AJAX

Question

我有兩個下拉菜單，其中一個我試圖用jquery替換單選按鈕。第二個盒子通過AJAX進行更新，每次用戶在第一個下拉菜單中進行選擇時都會有新選項。我已經成功生成單選按鈕，可以更改第一個下拉列表的值，但是當用戶使用單選按鈕更新第一個下拉菜單時，它不再影響第二個下拉框中的值。我對AJAX或JS並不擅長，當用戶選擇一個單選按鈕時，我無法弄清楚如何觸發AJAX加載。

我很抱歉代碼的牆，我不知道什麼是重要的，所以我包括了一切似乎相關。如果你想看到有問題的頁面，你可以看到它here.

的代碼我使用生成單選按鈕看起來像這樣：

$(function(){ 
    $("#options-1 option").each(function(i, e) { 
     $("<input type='radio' name='r' />") 
     .attr("value", $(this).val()) 
     .attr("checked", i == 0) 
     .click(function() { 
      $("#options-1").val($(this).val()); 
     }) 
     .appendTo("#r"); 
     $("#options-1").change(function(){ 
     $("input[name='r'][value='"+this.value+"']").attr("checked","checked"); 
}); 
}); 
}); 

$("#options-1").change(function(){ 
    $("input[name='r'][value='"+this.value+"']").attr("checked","checked"); 
}); 

的下拉菜單中的HTML這個樣子：

<form action="http://example.com/dev3/?page_id=5" method="post" class="shopp product validate"> 
<div id="r"></div> 

<ul class="variations"> 
<li> 
<label for="options-1">Framing</label> 
<select name="products[1][options][]" class="category-catalog product1 options" id="options-1"><option value="1">Print Only (Unframed)</option> 
<option value="2">Professionally Framed</option> 
</select><li> 
<label for="options-2">Size</label> 
<select name="products[1][options][]" class="category-catalog product1 options" id="options-2"><option value="3">12 x 8</option> 
<option value="4">24 x 36</option> 
</select></li> 

</ul> 

<p><input type="hidden" name="products[1][product]" value="1" /><input type="hidden" name="products[1][category]" value="catalog" /><input type="hidden" name="cart" value="add" /><input type="submit" name="addtocart" value="Add to Cart" class="addtocart" /></p> 

</form> 

的AJAX看起來像這樣：

<script type='text/javascript' src='http://example.com/dev3?sjsl=colorbox,shopp,catalog,cart&amp;c=1&amp;ver=98239bb061a58639408323699680ad0e'></script> 
<script type='text/javascript'> 
/* <![CDATA[ */ 
var ShoppSettings = { 
    ajaxurl: "http://example.com/dev3/wp-admin/admin-ajax.php", 
    cp: "1", 
    c: "$", 
    p: "2", 
    t: " ", 
    d: ".", 
    g: "3", 
    nocache: "", 
    opdef: "" 
}; 
    var pricetags = {}; 
jQuery(window).ready(function(){ var $ = jqnc(); 
     pricetags[1] = {}; 
    pricetags[1]['pricing'] = {"18770":{"p":10,"i":false,"s":false,"t":"Shipped"},"25785":{"p":21,"i":true,"s":"1","t":"Shipped"},"23510":{"p":20,"i":false,"s":false,"t":"Shipped"}}; 
    pricetags[1]['menu'] = new ProductOptionsMenus('select.category-catalog.product1.options',true,pricetags[1]['pricing'],0); 

}); 
/* ]]> */ 
</script> 

Answer 1

當您通過js更改組合框的值時，它不會觸發onChange功能，也不會觸發onClick等。

您必須使用與使用無線電更新組合1的組合1更新組合2相同的代碼。

我建議將該代碼放在另一個函數中，並從兩個地方調用該函數。

希望它有幫助。