title: Select another dropdown value based on the previous dropdown selection
body: <p>I am new to html javascript and trying to learn it. I am having an issue that when I select a value of a dropdown it will select another dropdown value when certain criteria matches.
  If they Select the option 4 (takeout) from service_type dropdown, the counter dropdown will automatically selected the option 2 driveway. else user are free to select any value on both dropdown. Only if they select Takeout, it will make driveway selected and also make the table service option inactive.
  if they select 1,2 or 3 from the Service type dropdown then option 1 will be enabled.
  I need a javascript and no jquery. Please help me</p>
  <pre><code>    &lt;div class=&quot;form-group col-md-12&quot;&gt;
          &lt;select name=&quot;service_type&quot; id=&quot;service_type&quot; class=&quot;form-control form-control-line&quot; required&gt;
              &lt;option value=&quot;&quot; selected=&quot;selected&quot; &gt;Select Service&lt;/option&gt;
              &lt;option value=&quot;1&quot;&gt;Dining&lt;/option&gt;
              &lt;option value=&quot;2&quot;&gt;Beverages&lt;/option&gt;
              &lt;option value=&quot;3&quot;&gt;Liquor&lt;/option&gt;
              &lt;option value=&quot;4&quot;&gt;Takeout&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  
  
      &lt;div class=&quot;form-group col-md-12&quot;&gt;
          &lt;select name=&quot;counter&quot; id=&quot;counter&quot; class=&quot;form-control form-control-line&quot; required&gt;
              &lt;option value=&quot;&quot; selected=&quot;selected&quot; &gt;Select Counter&lt;/option&gt;
              &lt;option value=&quot;1&quot;&gt;Table Service&lt;/option&gt;
              &lt;option value=&quot;2&quot;&gt;Driveway&lt;/option&gt;
          &lt;/select&gt;
      &lt;/div&gt;
  </code></pre>