title: create a cascading dropdown list with JavaScript and jQuery
body: <p>Hi I have this code But I don't Know why not working is gives me a display but if I change the first drop-down list don't change the drop-down to the second list.</p>
  <p>I&quot;m using this HTML in-app script.</p>
  <p>This is my code I using HTML and jQuery:</p>
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script type=&quot;text/javascript&quot; src=&quot;jquery-3.5.1.min.js&quot;&gt;  
      $(document).ready(function(){
      var $cat = $('select[name=category]'),
          $items = $('select[name=items]');
  
      $cat.change(function(){
          var $this = $(this).find(':selected'),
              rel = $this.attr('rel'),
              $set = $items.find('option.' + rel);
          
          if ($set.size() &lt; 0) {
              $items.hide();
              return;
          }
          
          $items.show().find('option').hide();
          
          $set.show().first().prop('selected', true);
      });
  });
      &lt;/script&gt; 
  &lt;/head&gt;   
  &lt;body&gt;
  
  &lt;h1&gt;Cascading Dropdown Example&lt;/h1&gt;
  &lt;select name=&quot;category&quot;&gt;
      &lt;option value=&quot;0&quot;&gt;None&lt;/option&gt;
      &lt;option value=&quot;1&quot; rel=&quot;accessories&quot;&gt;Cellphones&lt;/option&gt;
      &lt;option value=&quot;2&quot; rel=&quot;sports&quot;&gt;Sports&lt;/option&gt;
      &lt;option value=&quot;3&quot; rel=&quot;cars&quot;&gt;Cars&lt;/option&gt;
  &lt;/select&gt;
  &lt;select name=&quot;items&quot; class=&quot;cascade&quot;&gt;
      &lt;option value=&quot;3&quot; class=&quot;accessories&quot;&gt;Smartphone&lt;/option&gt;
      &lt;option value=&quot;8&quot; class=&quot;accessories&quot;&gt;Charger&lt;/option&gt;
      &lt;option value=&quot;1&quot; class=&quot;sports&quot;&gt;Basketball&lt;/option&gt;
      &lt;option value=&quot;4&quot; class=&quot;sports&quot;&gt;Volleyball&lt;/option&gt;
      &lt;option value=&quot;6&quot; class=&quot;cars&quot;&gt;Corvette&lt;/option&gt;
      &lt;option value=&quot;2&quot; class=&quot;cars&quot;&gt;Monte Carloe&lt;/option&gt;
  &lt;/select&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>I get that code from this source:
  <a href="https://jsfiddle.net/userdude/bY5LF/" rel="nofollow noreferrer">https://jsfiddle.net/userdude/bY5LF/</a></p>