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

下拉选择选项显示价格？

3 个答案: