Question

我在这里有这个工作代码：

function updatetotal (section, pricetoadd)         
{
    TotalPrice[section] = pricetoadd;
    total = 0;

    for(key in TotalPrice)
    {
        total = total + TotalPrice[key];
    }

    $("#monthlycost").html("$" + total);
    $("#firstpayment").html("$" + total);
}

<input {if $hw_s.disk[$_var].content == $__val.content}checked{/if} type=radio name="order[disk][{$_var}][content]" value="{$__val.content}" price="{$__val.price}" setup="{$__val.setup}" onclick="updatetotal('disk{$_var}', {$__val.price})">

请注意，该值非常重要。它必须是$ __ val.content才能使所有后端代码正常运行。

我要做的是将上面的内容转换为下拉列表并使功能仍能正常运行。 JS函数保持每个选定项的运行总计并将它们一起添加。使用输入类型的无线电，它非常简单，因为JS功能可以采用价格变量。不幸的是，通过下拉列表（据我所知），onChange函数必须与select相关联，而不是选项。不幸的是，由于选项是动态生成的，因此选择对选项一无所知。

到目前为止

代码（不工作）：

function updatetotaldd(section, elementid)
{
    var selectBox = document.getElementById(elementid);
    var selectedValue = selectBox.options[selectBox.selectedIndex].value; // does not get what I need since value is a string. I need to somehow access the price of the selected option.


    TotalPrice[section] = selectedValue;

    for(key in TotalPrice)
    {
        total = total + TotalPrice[key];
    }

    $("#monthlycost").html("$" + total);
    $("#firstpayment").html("$" + total);
}

<select class="tech" name="order[disk][{$_var}][content]" id="svtech{$_var+1}" data-enablecheckbox="false" onChange="updatetotaldd('disk{$_var}', 'svtech{$_var+1}')">
    {foreach key=__var item=__val from=$_val}
        <option {if $hw_s.disk.content == $__val.content}selected{/if} value="{$__val.content}"  price="{$__val.price}" setup="${$__val.setup}" onSelect="updatetotaldd('disk{$_var}', 'svtech{$_var+1}')">
        {$__val.content}
        {if $__val.price > 0 && $__val.setup > 0}
            <strong> - add ${$__val.price}/Mo + ${$__val.setup} One time fee</strong>
        {elseif $__val.price > 0}
            <strong> - add ${$__val.price}/Mo</strong>
        {elseif $__val.setup > 0}
            <strong>- add ${$__val.setup} One time fee</strong>
        {/if}
        </option>
    {/foreach}
</select>

我如何将价格传递给javascript（无论是选择上的onChange还是选项本身的其他一些操作），或者某种方式让选项具有变量属性（NOT VALUE）？

Answer 1

fletch是对的，我纠正了错误。请参阅here。

var selectedOption = selectBox.options[selectBox.selectedIndex]; //need to somehow access the price of the selected option.

price= parseInt(selectedOption.getAttribute('price'));

Answer 2

如果您没有尝试过，请将其丢弃......

您已在price元素上定义了option属性，因此您应该能够像任何其他属性一样检索它。不确定是否需要在每个onSelect元素上调用option，因为onChange元素上的select应该可以解决问题。

function updatetotaldd(section, elementid)
{
    var selectBox = document.getElementById(elementid);
    //var selectedValue = selectBox.options[selectBox.selectedIndex].value; // does not get what I need since value is a string. I need to somehow access the price of the selected option.
    var selectedPrice = selectBox.options[selectBox.selectedIndex].attributes.price.value;


    TotalPrice[section] = selectedPrice;

    for(key in TotalPrice)
    {
        total = total + TotalPrice[key];
    }

    $("#monthlycost").html("$" + total);
    $("#firstpayment").html("$" + total);
}

<select class="tech" name="order[disk][{$_var}][content]" id="svtech{$_var+1}" data-enablecheckbox="false" onChange="updatetotaldd('disk{$_var}', 'svtech{$_var+1}')">
    {foreach key=__var item=__val from=$_val}
        <option {if $hw_s.disk.content == $__val.content}selected{/if} value="{$__val.content}"  price="{$__val.price}" setup="${$__val.setup}" onSelect="updatetotaldd('disk{$_var}', 'svtech{$_var+1}')">
        {$__val.content}
        {if $__val.price > 0 && $__val.setup > 0}
            <strong> - add ${$__val.price}/Mo + ${$__val.setup} One time fee</strong>
        {elseif $__val.price > 0}
            <strong> - add ${$__val.price}/Mo</strong>
        {elseif $__val.setup > 0}
            <strong>- add ${$__val.setup} One time fee</strong>
        {/if}
        </option>
    {/foreach}
</select>

HTML选择/选项将值传递给javascript函数

2 个答案: