下拉选择选项显示价格？

Question

下拉选择选项显示价格？

3

也许我的问题没有表达得很好，但我想在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中，但第二个div中没有任何内容显示。我无法弄清楚应该如何更改才能使其正常工作...

- whitesova93

两个HTML片段似乎没有任何区别。 - Sagar V

是的，没有区别，但当我在第二个下拉菜单中选择一个选项时，价格仅在第一个下拉菜单中可见，并且当前选项旁边没有显示任何内容。 - whitesova93

3个回答

2

您需要使用 class 而不是 id，因为 id 必须是唯一的，并且使用 .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>

- Shubham Khatri

完全不工作...请查看这个链接: http://doormats.bg/ent-dm.php 往下滚动一点，在第一张图片下面您会看到一个下拉菜单，请选择其中一项，然后一个价格将出现。之后再往下滚动一点，在第二个下拉菜单中选择一个选项，但是价格不会出现，只会更改第一个下拉菜单中的价格。 - whitesova93

这里似乎运行正常，但在我的网站上不起作用。 - whitesova93

在您的网站中，我认为您没有将div id更改为class。我仍然可以看到<div id="divprice">而不是<div class="divprice">，同样对于下拉选择框，更改它就应该可以工作了。 - Shubham Khatri

现在检查页面，一切都像你向我展示的那样，但是它不起作用...有什么想法吗？ - whitesova93

1

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

- ANIK ISLAM SHOJIB

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zakaria Acharki · Accepted Answer

当两个列表中具有相同的id时，id属性应该在同一文档中是唯一的，否则只会选择第一个。

我建议使用通用类，将#divprice替换为类.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代码中所做的那样。

希望这能帮到你。