Триггер AJAX с событием jquery click

Question

У меня есть два выпадающих меню, одно из которых я пытаюсь заменить переключателями с помощью jquery. Второе поле обновляется через AJAX с новыми параметрами каждый раз, когда пользователь делает выбор в первом раскрывающемся списке. Я успешно создал переключатели, которые изменяют значения для первого раскрывающегося списка, но когда пользователь обновляет первое раскрывающееся меню с помощью переключателей, это больше не влияет на значения во втором раскрывающемся списке. Я не очень хорош с AJAX или JS, и я не могу понять, как вызвать загрузку AJAX, когда пользователь выбирает одну из переключателей.

Я заранее прошу прощения за стену кода, я не уверен, что важно, поэтому я включил все, что казалось уместным. Если вы хотите увидеть страницу, о которой идет речь, вы можете увидеть ее здесь.

Код, который я использую для создания переключателей, выглядит следующим образом:

 $(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 и т. Д.

Вам придется использовать тот же код, который вы используете для обновления Combo 2с Combo 1, где вы обновляете Combo 1 с помощью Radio.

Я предлагаю поместить этот код в другую функцию и вызывать эту функцию из обоих мест.

Надеюсь, это поможет.