The drop-down selection option displays the price?

advertisements

Maybe I didn't constructed my question very good but I am trying to add to an HTML page a drop down menu and when an option is selected it should display some price and everything is fine by now, but when I add multiple dropdowns the price is showed only in the first div and I would like to make it show different price for each dropdown.

JS :

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

HTML :

<select id="bedrooms" onchange="changeddl(this)">
  <option>Size</option>
  <option value="160">90 x 50 | 4,75 kg.</option>
  <option value="240">100 х 200 | 7,35 kg.</option>
</select>
<div id="divprice" class="price-style"></div>

This works fine but when I add one more:

<select id="bedrooms" onchange="changeddl(this)">
      <option>Size</option>
      <option value="160">90 x 50 | 4,75 kg.</option>
      <option value="240">100 х 200 | 7,35 kg.</option>
    </select>
    <div id="divprice" class="price-style"></div>

The price is showing in the first div and nothing appears to this one. I can't figure out what should I change to make it work proper...


You have the same id in the both lists when the id attribute should be unique in the same document, else just the first one will be picked always.

I suggest the use of common classes, so try to replace the id #divprice by class .divprice example :

$($this).next('.divprice').text( $this.value>0?("Price: " + $this.value + " $"):"" );

And HTML should be :

<select class="bedrooms" onchange="changeddl(this)">
    <option>Size</option>
    <option value="160">90 x 50 | 4,75 kg.</option>
    <option value="240">100 х 200 | 7,35 kg.</option>
</select>
<div class="divprice" class="price-style"></div>

<select class="bedrooms" onchange="changeddl(this)">
  <option>Size</option>
  <option value="160">90 x 50 | 4,75 kg.</option>
  <option value="240">100 х 200 | 7,35 kg.</option>
</select>
<div class="divprice" class="price-style"></div>

NOTE : Also the id bedrooms should be changed to be unique or common class as I did in the previous HTML code.

Hope this helps.