0

I'm currently coding up two dropdowns that are dependent on each other. My first drop down is Stone Type and my second drop down is Stone Size. When I select a particular stone type, I only want to display the available stone sizes in the second dropdown. Here is an example:

User selects "Round" stone type, only want to display "6.5mm", "7.5mm", "8mm" in the stone size dropdown. User selects "Pear" stone type, only want to display "6.5mm", "8mm" in the stone size dropdown.

Here is my current HTML code:

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

I'm trying to achieve this using Javascript, and I've seen a few ways online but nothing that could really work for mine. If anyone could help me out, that would be greatly appreciated.

Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
Alyssa
  • 55
  • 7
  • 1
    We expect that you'll make an attempt first and then post with questions about that attempt. What have you tried? It seems that toggling a simple CSS class to the `option` elements that should be shown/hidden would do the trick. Or, keep the different option values in an array and build the `options` dynamically based on the array items. – Scott Marcus Jul 01 '20 at 16:38
  • @scottmarcus I don't even have a starting point, right now all I was doing was showing/hiding different dropdowns for different stone types, but I found that to be tedious. – Alyssa Jul 01 '20 at 17:01
  • [How to ask a question](https://stackoverflow.com/help/how-to-ask) – Scott Marcus Jul 01 '20 at 17:04

0 Answers0