将选项值更改为链接

Question

我试图将选项值列表更改为正常链接。我在这里阅读了几篇文章，但我真的无法弄清楚这一点。

原代码与选择框如下：

<form class="formProduct" id="product_configure_form" action="webshop.com/add/123456" method="post"> 
    <div class="product-configure"> 
     <div class="product-configure-variants"> 
     <label for="product_configure_variants">Choose: <em>*</em></label> 
     <select onchange="document.getElementById('product_configure_form').action = 'http://webshop.com/product/variants/3415658/'; document.getElementById('product_configure_form').submit();" id="product_configure_variants" name="variant"> 
      <option value="5884844">Size 1</option> 
      <option value="5884845">Size 2</option> 
      <option selected="selected" value="5984036">Size 3</option> 
     </select> 
     </div> 
     .... 
     </form> 

我尝试是改变选项值正常的文本链接。表格需要保持运作。于是，我就使实际的形式，无形的，然后使用该代码：

 <div class="sizes"> 
     <a title="size 1" id="5884844" onclick="belt_size_change(this);" onfocus="this.blur();" href="javascript:;">Size 1</a> 
     <a title="size 2" id="5884845" onclick="belt_size_change(this);" onfocus="this.blur();" href="javascript:;">Size 2</a> 
     <a title="size 3" id="5984036" onclick="belt_size_change(this);" onfocus="this.blur();" href="javascript:;">Size 3</a> 
     </div> 
     </div> 

和jQuery：

 function belt_size_change(val){ 
     value = val.id; 
     new_value = val.id; 
     new_value = new_value.substr(1,99); 
     $('#product_configure_variants').val(new_value); 
     document.getElementById('product_configure_form').action = 'http://webshop.com/product/variants/3415658/'; 

     document.getElementById('product_configure_form').submit(); 
     } 

     $(document).ready(function() { 
     current_value = val.id; 
     new_value = "r" + current_value; 
     $('#' + new_value).addClass('selected'); 
     }); 

我是一个完整的noob当涉及到jQuery的，所以请温柔:)任何非常感谢！

Answer 1

一个解决方案是使用jQuery的replaceWith()方法。

工作演示：http://jsfiddle.net/Adsgn/kXtLK/2/

$('select').each(function() { 
    $(this).replaceWith('<ul>' + $(this).html() + '</ul>'); 
});