convert <select> to <input radio>

Question

Смутно о том, как конвертировать <select><option> в переключатели.

После того как мы провели дни, настраивая это выпадающее меню, чтобы правильно функционировать в этом проекте simpleCart (js), теперь мой клиент (к моей большой радости) изменил свое мнение и решил, что ему нужны кнопки вместо этого.

Что было бы правильным способом реализации этого изменения. Я пробовал переключатели, но то, что я сделал до сих пор, не работает. Форма, которую я создал, кажется, не общается с simpleCart (js).

То, что я имел (работает отлично)

<select id="sizeSelect" class="item_size dropdown" autocomplete="off"> 
    <option value="nul" selected="selected">Please choose size</option> 
    <option value="Small">Small</option> 
    <option value="Medium">Medium</option> 
    <option value="Large">Large</option> 
    <option value="Super Brain">Super Brain</option> 
    </select> 

    <select id="shippingSelect" class="item_shipping" autocomplete="off"> 
    <option value="nul" selected="selected">Please choose shipping</option> 
    <option value="ups">UPS Standard 25€</option> 
    <option value="mail">Standard Mail 10€</option> 
    </select> 
    <select id="regionSelect" class="item_tax" autocomplete="off"> 
    <option value="nul" selected="selected">Please choose region</option> 
    <option value="Eu VAT 21%">Eu VAT 21%</option> 
    <option value="World (Taxfree)">World (Tax Free)</option> 
    </select> 

<button class="item_add">Add to Cart</button> 

То, что я пытаюсь (не работает)

<form> 
<fieldset> 
<legend>Please choose size:</legend> 
<input type="radio" name="size" id"sizeSelect" class="item_size" value="nul" style="display:none" checked> 
<label><input type="radio" name="size" id"sizeSelect" class="item_size" value="small"> Small </label> 
<label><input type="radio" name="size" id"sizeSelect" class="item_size" value="medium"> Medium </label> 
</fieldset> 
<fieldset> 
<legend>Please choose shipping:</legend> 
<input type="radio" name="shipping" id="shippingSelect" class"item_shipping" value="nul" style="display:none" checked> 
<label><input type="radio" name="shipping" id="shippingSelect" class"item_shipping" value="ups"> UPS Standard 25€</label> 
<label><input type="radio" name="shipping" id="shippingSelect" class"item_shipping" value="mail"> Standard Mail 10€</label> 
</fieldset> 
<fieldset> 
<legend>Please choose destination:</legend> 
<input type="radio" name="destination" id="destinationSelect" class"item_price" value="nul" style="display:none" checked> 
<label><input type="radio" name="destination" id="destinationSelect" class"item_price" value="290.00"> EU</label> 
<label><input type="radio" name="destination" id="destinationSelect" class"item_price" value="220.00"> World</label> 
</fieldset> 
<input type="submit" class="item_add " value="Add to Cart"> 
</form> 

UPDATE

Используя его достаточно, чтобы использовать class="item_size или другие SC для подачи данных в корзину.

UPDATE

Корзина HTML:

<div class="simpleCart_items"></div> 
    <div class="simpleCart_itemSize"></div> 
    Shipping:<span class="simpleCart_shipping"></span><br> 
    <strong>Total with Shipping: <span class="simpleCart_grandTotal"></span></strong> 
    <p style="text-align:right"><a href="javascript:;" class="simpleCart_checkout">Checkout</a></p> 

С помощью радиокнопки я получаю GrandTotal из

Всего с Доставка: € NaN

так что для m не общается с тележкой. но там, где вилка неплотно является полной загадкой для меня ..

UPDATE Извините, ребята, в моей фрустрации я забыл сказать ...

<script type="text/javascript"> 
    simpleCart.shipping = function(){ 
    if($("#shippingSelect").val() == "nul"){return 0;}  
    if($("#shippingSelect").val() == "ups"){return 25;} 
    if($("#shippingSelect").val() == "mail"){return 10;} 
    }; 
    </script> 

    <script type="text/javascript"> 
    simpleCart.tax = function(){ 
    if($("#regionSelect").val() == "nul"){return 0;} 
    if($("#regionSelect").val() == "Eu VAT 21%"){return 90;} 
    if($("#regionSelect").val() == "World (Taxfree)"){return 0;} 
    }; 
    </script> 

Answer 1

Вашей установка ваших значений functions не к значениям. Ниже:

simpleCart.tax = function(){ 
    if($("#regionSelect").val() == "nul"){return 0;} 
    if($("#regionSelect").val() == "Eu VAT 21%"){return 90;} 
    if($("#regionSelect").val() == "World (Taxfree)"){return 0;} 
    }; 

не устанавливает tax к значению return это Сета его в function pointer. Который, потому что это не номер (это function), это Nan.

изменить это:

function getTax(){ 
     if($("#regionSelect").val() == "nul"){return 0;} 
     if($("#regionSelect").val() == "Eu VAT 21%"){return 90;} 
     if($("#regionSelect").val() == "World (Taxfree)"){return 0;} 
     } 

simpleCart.tax = getTax(); 

для дальнейшего объяснить это можно сделать так:

function getTax(){ 
     if($("#regionSelect").val() == "nul"){return 0;} 
     if($("#regionSelect").val() == "Eu VAT 21%"){return 90;} 
     if($("#regionSelect").val() == "World (Taxfree)"){return 0;} 
     } 
//this is a function pointer 
var getTaxFunctionpointer = getTax; 

//this will return an integer 
simpleCart.tax = getTaxFunctionpointer();