title: Update drop down selection with radio button selection using jquery
body: <p>So this is a follow up to this <a href="https://stackoverflow.com/questions/3974217/convert-dropdowns-to-radio-buttons-w-o-modifying-html">post</a>. 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. </p>
  
  <p>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 <a href="http://designvillain.com/dev3/?page_id=4&amp;shopp_pid=1" rel="nofollow noreferrer">here</a></p>
  
  <p>Here is the <a href="http://www.jsfiddle.net/yJTdF/" rel="nofollow noreferrer">original solution</a> from the earlier post</p>
  
  <p>So here is the updated code:</p>
  
  <pre><code>&lt;script type='text/javascript'&gt; 
      $(function(){
      $("#options-1 option").each(function(i, e) {
          $("&lt;input type='radio' name='r' /&gt;")
          .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");
  });
  });
  });
  &lt;/script&gt; 
  </code></pre>