CODEWITHSUNDEEP
javascriptjqueryhtml
whitesova93
whitesova93

Reputation: 100

Dropdown select option shows price?

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

Upvotes: 3

Views: 1908

Answers (3)

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

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.

Upvotes: 3

ANIK ISLAM SHOJIB
ANIK ISLAM SHOJIB

Reputation: 3258

you need only one div to show value try this
<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>

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


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

Upvotes: 1

Shubham Khatri
Shubham Khatri

Reputation: 281922

You need to make use of class and not id since ids must be unique and the .next() to change text of the next div like

function changeddl($this){
   $($this).next('.divprice').text($this.value>0?("Price: " + $this.value + " $"):"");
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Upvotes: 2

Related Questions