CODEWITHSUNDEEP
javascriptjqueryhtml-select
darylsummers
darylsummers

Reputation: 89

Select dropdown option to display a predefined price

Hi everyone I hope you can help me today.

I am creating a pricing page for my business and I need a select dropdown to display a list of bedrooms, e.g. 1 Bedroom, 2 Bedrooms, 3 Bedrooms etc.

When an option has been selected, a div below will display a price. E.g. if I select 4 bedrooms from the dropdown, the text below the dropdown field will display £100. If I select 3 bedrooms, the price below will display £80. It needs to be separate from the dropdown field.

The concept is simple but I am asking for help in terms of its functionality. I have searched for jQuery sliders that can do this for me but have not found anything suitable that is user friendly for what I require it to display.

All help, as always, is greatly appreciated!

Upvotes: 0

Views: 4744

Answers (2)

Ranjit Singh
Ranjit Singh

Reputation: 3735

You can easy achieve this by using onchange event of dropdown. Save the value of price in value attribute of options. like :

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>

then on "onchange" event put the value of selected item in "divprice" element.

Javascript will looks like 

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

check the demo here

Upvotes: 1

ReDEyeS
ReDEyeS

Reputation: 851

Working Demo Here

This's a possible solution:

html code

<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 code

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

Upvotes: 3

Related Questions