CODEWITHSUNDEEP
jqueryformshtml-select
Meules
Meules

Reputation: 1389

Change option values to link

I'm trying to make an option value list to change into a normal link. I'v read several posts here but I really can't figure this one out.

The original code with the select box is as follow:

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

What I try is to change the option values to normal text links. The form needs the be kept functioning. So I tried to make the actual form invisible and then used this code:

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

And 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');
      });

I'm a complete noob when it comes to Jquery so please be gentle :) Any help much appreciated!

Upvotes: 0

Views: 125

Answers (1)

Jan Werkhoven
Jan Werkhoven

Reputation: 2953

One solution is to use the replaceWith() method of jQuery.

Working demo: http://jsfiddle.net/Adsgn/kXtLK/2/

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

Upvotes: 1

Related Questions