选择下拉选项以显示预定义的价格

Question

大家好，我希望你今天可以帮助我。

我正在为我的公司创建一个定价页面，我需要一个选择下拉列表来显示一个卧室列表，例如一卧室，两卧室，三卧室等。

选择选项后，下方的div将显示价格。例如。如果我从下拉列表中选择4个卧室，则下拉字段下方的文本将显示100英镑。如果我选择3间卧室，下面的价格将显示80英镑。它需要与下拉字段分开。

这个概念很简单，但我在功能方面寻求帮助。我已经搜索了jQuery滑块，它可以为我做这个但是没有找到任何适合用户友好的东西，我需要它显示。

非常感谢所有人的帮助！

Answer 1

Working Demo Here

这是一个可能的解决方案：

html代码

<select id="bedrooms">
  <option>Choose beds</option>
  <option value="150">1 bed</option>
  <option value="200">2 beds</option>
  <option value="300">3 beds</option>
  <option value="400">4 beds</option>
</select>

<div id="price"></div>

Javascript代码

$("#bedrooms").change(function() {
    if ($.isNumeric($(this).val())) {
        $("#price").html("price: $ " + $(this).val());
    } else {
        $("#price").empty();
    };
});

Answer 2

您可以使用onchange dropdown事件轻松实现此目的。在选项的value属性中保存price的值。 喜欢：

HTML

<select id="bedrooms" onchange="changeddl(this)">
  <option>Choose beds</option>
  <option value="150">1 bed</option>
  <option value="200">2 beds</option>
  <option value="300">3 beds</option>
  <option value="400">4 beds</option>
</select>

<div id="divprice"></div>

然后在"onchange"事件中将所选项的值放在"divprice"元素中。

Javascript看起来像

function changeddl($this){
   $("#divprice").text($this.value>0?("price: $ " + $this.value):"");
};

查看演示here