Question

您好，

我需要一些非常简单的Javascript问题的帮助。我正在做一个基于4个不同变量的滑块。我已将其简化为将服务器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

Javascript Slider问题，根据下拉输出结果

1 个答案: