下拉选择选项显示价格？

Question

也许我的问题不是很好，但是我试图在HTML页面上添加一个下拉菜单，并且当选择一个选项时，它应该显示一些价格，并且现在一切都很好，但是当我添加多个下拉菜单时，价格仅在第一个div中显示，我希望每个下拉菜单显示不同的价格。

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>

这工作正常，但是当我再添加一个时：

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

价格显示在第一个div中，这个没有显示。 我不知道该怎么做才能使其正常工作...

Answer 1

你有相同的id在这两个列表时， id属性应该是相同的文档中是唯一的，否则只是第一个将总是挑。

我建议使用公共类，因此请尝试使用类.divprice示例替换ID #divprice ：

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

HTML应该是：

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

注意：另外，id bedrooms也应更改为唯一的或普通的类，就像我在前面的HTML代码中所做的一样。

希望这可以帮助。

Answer 2

您需要使用class而not id因为ids must be unique ，并且.next()可以更改下一个div的文本，例如

 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> 

Answer 3

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 + " $"):"");
};