How to Hide and Show Div by Id Based on the Value of Selected Drop Down -Jquery and JavaScript

How to show or hide the data based on dropdown selection

You can define a template variable (e.g. #mySelect) on the <select> element, then use it to determine the selected value: mySelect.value.

In case you need to display the div if the selected category equals to 'Habit', you can try the following:

<!-- #mySelect is declared on <select> element -->
<select class="form-control" id="power" required #mySelect>
  <option value="" disabled selected>Select a category</option>
  <option *ngFor="let category of categoryNames">{{ category }}</option>
</select>

<div class="row" *ngIf="mySelect.value === 'Habits'">
  <div class="col-sm-8">
    <p>Slect Habits</p>
    <h5 class="formxp">Slect Items</h5>
  </div>
  <div class="col-sm-4">
    <p>Slect Habits</p>
    <h5 class="formxp">Slect Items</h5>
  </div>
</div>

You can read more about the Angular Template Variable here:
https://angular.io/guide/template-reference-variables

show/hide div on selected value

Your check for Material fehlt is not right. Use

@change="$event.target.value == 'Material fehlt'

not

@change="$event.target.value = 'Material fehlt'

You compare values with == and assign those with =. So what you did was not a comparison.

Here is a complete example I used:

<html>
  <head>
    <script
      src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.0/dist/alpine.min.js"
      defer
    ></script>
    <link
      href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div x-data="{material_enabled : false}">
      <div
        class="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5"
      >
        <div class="mt-1 sm:mt-0 sm:col-span-2">
          <select
            @change="$event.target.value == 'Material fehlt' ? material_enabled=true : material_enabled=false"
            id="category"
            name="category"
            autocomplete="category"
            class="max-w-lg block focus:ring-indigo-500 focus:border-indigo-500 w-full shadow-sm sm:max-w-xs sm:text-sm border-gray-300 rounded-md"
          >
            <option value="" selected>Wähle einen Stillstandsgrund</option>
            <option>ungeplanter Stillstand (Maschinenstillstand)</option>
            <option>geplanter Stillstand (Instandhaltung geplant)</option>
            <option>Rüsten</option>
            <option>Wartung durch Mitarbeiter</option>
            <option>Material fehlt</option>
          </select>
        </div>
      </div>
      <div class="mt-4">
        Value of <strong>material_enabled</strong>:
        <span x-text="material_enabled"></span>
      </div>
    </div>
  </body>
</html>

Show/Hide div depend on dropdown select in AngularJS with default value

To set default values, simply assign them in your controller:

var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope, $window, $element) {
  $scope.region.name = 'uk';

});

See updated jsfiddle here.

To answer your section question, the reason why it's not working is because you haven't actually initialed the object anywhere. When your code attempts to access region.name, region has not yes been defined, and causes the ng-if statement to no longer attempt to validate. To solve this, initialize the full object at the start:

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function($scope, $window, $element) {
  $scope.region = {
    name: 'us'
  };
});

See updated jsfiddle here.

on dropdown select value show hidden input field

Pass the this keyword into your callback function:

const ac = document.getElementById("admin_code");ac.style.display = "none";
function toggleDropdown(selObj) {  ac.style.display = selObj.value === "Admin" ? "block" : "none";}

<label>User Type:</label><select id="userType" name="userType" id="userType" onchange='toggleDropdown(this);' required>  <option value="" selected>Select User Type</option>  <option value="Client">Client</option>  <option value="Admin">Admin</option>  <option value="Staff">Staff</option></select><br><div id="admin_code">  <label>Admin Code:</label> <input type="text" name="adminCode" id="adminCode"></div>

javascript - hide / show div based on selection

When you hide your div, turn on the disabled attribute for all children and when you show a div remove it. Something like this:

var showDiv = function ( id ) {
    var all = [document.getElementById( 'A' ), 
               document.getElementById( 'B' ), 
               document.getElementById( 'C' )],
        cur = document.getElementById( id ),
        inps;

    for (var i = 0, il = all.length; i < il; i++) {

        inps = all[i].getElementsByTagName('input');

        for (var j = 0, jl = inps.length; j < jl; j++) {
            inps[j].setAttribute('disabled', 'disabled');
        }

        all[i].style.display = 'none';

    }

    inps = cur.getElementsByTagName('input');

    for (j = 0, jl = inps.length; j < jl; j++) {
        inps[j].removeAttribute('disabled');
    }

    cur.style.display = 'block';
};