JSFiddle - React, Tailwind, and code Playground

by seeming

HTML

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
    var DisplayContents = [{
        name: '---',
        value: '',
        subDisplayContents: []
      },
      {
        name: 'Metals',
        value: 'metal',
        subDisplayContents: [{
            name: 'Copper',
            value: 'copper'
          },
          {
            name: 'Aluminium',
            value: 'aluminium'
          },
          {
            name: 'Iron',
            value: 'iron'
          }
        ]
      },
      {
        name: 'Minerals',
        value: 'mineral',
        subDisplayContents: [{
            name: 'Crystal',
            value: 'crystal'
          },
          {
            name: 'Gembone',
            value: 'Gembone'
          }
        ]
      }
    ];

    $(function() {
      var DynamicDataStore = {};

      $.each(DisplayContents, function() {
        $("<option />")
          .attr("value", this.value)
          .html(this.name)
          .appendTo("#F1Field");
        DynamicDataStore[this.value] = this.subDisplayContents;
      });

      $("#F1Field").change(function() {
        var value = $(this).val();
        var menu = $("#S2Field");

        menu.empty();
        $.each(DynamicDataStore[value], function() {
          $("<option />")
            .attr("value", this.value)
            .html(this.name)
            .appendTo(menu);
        });
      }).change();
    });

  </script>
</head>

<body>
  Html Dynamic DropDown Example<br>
  網頁輸入欄位動態改變範例<br><br>
  
  <select id="F1Field" name="metal"></select>
  <br />
  <br />
  <select id="S2Field" name="mineral"></select>
</body>

</html>