Question

So this is a follow up to this post. I need to replace some dropdown menus with radio buttons without modifying the HTML. In the post I linked earlier, someone came up with a really clever Jquery solution that successfully replaces the dropdown menu with radio buttons and updates the dropdown selection when one of the radio buttons is selected.

However, when I implemented it with the plugin, the radio buttons appear but they don’t update the drop down’s value when selected. I suspect there is some conflict with js elsewhere on the page but after some trial and error, I still can’t figure out whats going on. Any ideas? The site in question can be found here

Here is the original solution from the earlier post

So here is the updated code:

<script type='text/javascript'> 
    $(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");
});
});
});
</script> 

Answer 1

You need to have this function in addition to your existing code

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