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>

更新

使用它就足以使用class="item_size或其他SC类将数据提供给购物车。

更新

购物车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>

使用单选按钮我获得了

的格言

运费总额：€NaN

所以很明显表格不与购物车通信..但是插头松动的地方对我来说完全是个谜。

更新对不起，伙计们，在我的挫折中，我忘记了这个......

    <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();

将<select>转换为</select> <input radio =“”/>

1 个答案: