Question

I have two drop down menus, one of which I am trying to replace with radio buttons using jquery. The second box is updated via AJAX with new options any time the user makes a selection in the first drop down. I have successfully generated radio buttons that change the values for the first drop down but when the user updates the first drop down menu using the radio buttons, it no longer effects values in the second drop down boxes. I am not great with AJAX or JS and I can’t figure out how to trigger the AJAX load when the user selects one of radio buttons.

I apologize in advance for the wall of code, Im not sure what is important so I included everything that seemed relevant. If you want to see the page in question you can see it here.

The code I am using to generate radio buttons looks like this:

 $(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");
});

The HTML for the drop downs look like this:

<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>

The AJAX looks like this:

<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

When you change the value of a Combo Box via js, it doesn’t trigger the onChange function nor onClick and so on.

You’ll have to use the same code you use to update Combo 2 with Combo 1 where you update Combo 1 with the Radio.

I suggest to place that code inside another function, and call that function from both places.

Hope it helps.