Блог

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="dds" id="categories" onchange="getelementfromdropdown()">
  <option value="Friet" selected>Friet</option>
  <option value="Vegetarisch">Vegetarisch</option>
  <option value="Snacks">Snacks</option>
  <option value="Broodjes">Broodjes</option>
  <option value="Kapsalon">Kapsalon</option>
  <option value="Schotels">Schotels</option>
  <option value="Menus">Menu's</option>
  <option value="Diversen">Diversen amp; (fris)drank</option>
</select>

<div id="Friet" class="tabcontent"></div>

<script language="javascript">
   $(document).ready(function () {
     $("#categories").change(function () {
       getelementfromdropdown();
     });
   });

   function getelementfromdropdown() {
     var value = $("#categories").val();
     openTab(event, value);
   };

   function openTab(evt, Name) {
     var i, tabcontent, tablinks;
     tabcontent = document.getElementsByClassName("tabcontent");
     for (i = 0; i < tabcontent.length; i  ) {
       tabcontent[i].style.display = "none";
     }
     tablinks = document.getElementsByClassName("tablinks");
     for (i = 0; i < tablinks.length; i  ) {
       tablinks[i].className = tablinks[i].className.replace(" active", "");
     }
     document.getElementById(Name).style.display = "block";
     evt.currentTarget.className  = " active";
                    
   }
 </script>  

 /* Work with classes, not inline styles */
.hidden { display:none; }
.active { border:1px solid red; }  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- If an <option> doesn't specify a value, then its value becomes its text -->
<!-- You had an onchange event attribute here. Don't do that, it's not 1998!  -->
<select class="dds" id="categories">
  <option selected>Friet</option>
  <option>Vegetarisch</option>
  <option>Snacks</option>
  <option>Broodjes</option>
  <option>Kapsalon</option>
  <option>Schotels</option>
  <option value="Menus">Menu's</option>
  <option value="Diversen">Diversen amp; (fris)drank</option>
</select>

<!-- All tabs start out hidden and not active -->
<div id="Friet" class="tabcontent hidden">Friet</div>
<div id="Vegetarisch" class="tabcontent hidden">Vegetarisch</div>
<div id="Snacks" class="tabcontent hidden">Snacks</div>
<div id="Broodjes" class="tabcontent hidden">Broodjes</div>
<div id="Kapsalon" class="tabcontent hidden">Kapsalon</div>
<div id="Schotels" class="tabcontent hidden">Schotels</div>
<div id="Menus" class="tabcontent hidden">Menus</div>
<div id="Diversen" class="tabcontent hidden">Diversen</div>

<!-- language="javascript" hasn't been needed for almost 10 years -->
<script>
  // If you place your <script> just before the closing "body" tag, 
  // then there's no need to place code inside of document.ready().
  // The following code will just run as soon as the DOM is ready.

  // Show the selected option upon page load and make it active
  // by just finding the element who's id is the currently selected
  // value in the <select>
  $("#"   $("#categories").val()).show().addClass("active");

  // No need to have a function that only calls another one
  $("#categories").change(function (event){
    $(".tabcontent").hide().removeClass("active");    // Hide all the tabs and remove any active tab
    $("#"   $(this).val()).show().addClass("active"); // Show the selected tab and make it active
  });
</script>