Javascript Slider 问题，基于下拉菜单输出结果

Question

Fiddle here!

你好，

我需要一些帮助来解决一个非常简单的 Javascript 问题。我正在做一个基于 4 个不同变量的 slider 。我已将其简化为将它们显示为服务器 E 到服务 G。每项服务每平方米的价格不同，但我不希望所有服务都显示在屏幕上。我希望输出来自下拉列表的选择。

$(function() {
    $( "#slider" ).slider({
        value:10,
        min: 0,
        max: 60,
        step: 1,
        slide: function( event, ui ) {
            $( "#amount" ).val( ui.value );
            $( "#d" ).val( "£" + ui.value * 750 );
            $( "#e" ).val( "£" + ui.value * 800 );
            $( "#f" ).val( "£" + ui.value * 900 );
            $( "#g" ).val( "£" + ui.value * 1125 );
        }
    });
});

而不是#e #d 等，我喜欢#totalPrice，它基于他们从下拉列表中选择的选项

<option></option>
<option>Service D</option>
<option>Service E</option>  
<option>Service F</option>
<option>Service G</option>

是否可以在 Javascript 变量中创建这些变量，然后以 HTML 输出(无论选择哪个变量)。希望我让每个人都变得简单。任何帮助将不胜感激:)

Fiddle here!

Answer 1

您可以做几件事。一个相对简单和干净的方法是这样的:

首先，用每单位表面的价格标记每个服务选项。您可以使用 HTML5 数据属性执行此操作:

<option data-unit-value="750">Service D</option>
<option data-unit-value="800">Service E</option>  
<option data-unit-value="900">Service F</option>
<option data-unit-value="1125">Service G</option>

然后从 slide 处理程序中引用所选选项并获取要包含在计算中的单位值:

// not included: rigorous checks (e.g. what happens if nothing selected?)
var unitValue = $("#myList > :selected").attr("data-unit-value");
$("#amount" ).val(ui.value);
$("#total").val("£" + ui.value * unitValue);

最后不要忘记，更改下拉列表中的选定值也会导致总数更新:

$("#myList").change(function() {
    var unitValue = $("#myList > :selected").attr("data-unit-value");
    $("#total").val("£" + $("#slider").slider("value") * unitValue);
});

Updated fiddle .