CODEWITHSUNDEEP
javascriptjqueryhtmlforms
Thomas
Thomas

Reputation: 5089

Update drop down selection with radio button selection using jquery

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>

Upvotes: 1

Views: 3711

Answers (1)

Chinmayee G
Chinmayee G

Reputation: 8117

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

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

Upvotes: 2

Related Questions