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.