时间戳

首页 > 解决方案 > 选择另一个下拉值时如何从下拉列表中隐藏特定选项

javascript - 选择另一个下拉值时如何从下拉列表中隐藏特定选项

问题描述

我目前正在编写两个相互依赖的下拉列表。我的第一个下拉菜单是 Stone Type，我的第二个下拉菜单是 Stone Size。当我选择特定的宝石类型时，我只想在第二个下拉列表中显示可用的宝石尺寸。这是一个例子：

用户选择“圆形”石材类型，只想在石材尺寸下拉列表中显示“6.5mm”、“7.5mm”、“8mm”。用户选择“梨形”宝石类型，只想在宝石尺寸下拉列表中显示“6.5mm”、“8mm”。

这是我当前的 HTML 代码：

<label>Stone Type</label>
<select name="centre-stone-cut" class="wpcf7-form-control wpcf7-select" aria-invalid="false">
  <option value="">---</option>
  <option value="Pear">Pear</option>
  <option value="Round">Round</option>
  <option value="Princess">Princess</option>
</select>

<select name="round-stone-size" class="wpcf7-form-control wpcf7-select" aria-invalid="false">
   <option value="6.5mm - 1ct " price=" 478.40">6.5mm - 1ct </option>
   <option value="7.5mm - 1.50ct " price=" 910.80">7.5mm - 1.50ct </option>
   <option value="8mm - 2ct " price=" 1131.60">8mm - 2ct </option>
</select>

我正在尝试使用 Javascript 来实现这一点，并且我已经在网上看到了一些方法，但没有什么对我真正有用。如果有人可以帮助我，那将不胜感激。

标签： javascripthtml

解决方案

推荐阅读