how to change dropdown value take from sql based on selected dropdown

Question

this is the dropdown select package category for eg. i select unifi it will hide all except unifi package list.. but when i select streamyx the selected unifi package list still not reset means i will submit unifi and streamyx

                <form onsubmit="return validate()" name="registration" method="post" 
                   action="" class="form-horizontal form-label-left">
                   <div class="form-group">
                      <label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name"> Package Category<label style="color:red;">*</label> : 
                      </label> 
                      <div class="col-md-6 col-sm-6 col-xs-12">
                         <select name="PACKAGE_CATEGORY" class="form-control" onmousedown="this.value='';" onchange="jsFunction(this.value);" required id="streamSelect">
                            <option disabled selected value> -- select an option -- </option>
                            <option value="UNIFI">Unifi</option>
                            <option value="STREAMYX">Streamyx</option>
                            <option id="myDIV" value="WEBE">Webe</option>
                            <option id="myDIVA" value="LEASE LINE">Lease Line(DOME)</option>
                         </select>
                      </div>
                   </div>
                   <div class="form-group" id="beb">
                      <label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name"> Package List : 
                      </label> 
                      <div class="col-md-6 col-sm-6 col-xs-12">
                         <select name="PACKAGE_ID_UNIFI" class="form-control" onmousedown="this.value='';" onchange="jsFunction(this.value);">
                            <option disabled selected value> -- select an option -- </option>
                            <?php 
                               $result = mysqli_query($conn,"select * from unifi ORDER BY PACKAGE_NAME ASC"); 
                               while ($row=mysqli_fetch_assoc($result)) 
                               {?> 
                            <option value="<?php echo $row["no"]; ?>"> <?php echo $row["PACKAGE_NAME"]; ?></option>
                            <?php 
                               } 
                               ?> 
                         </select>
                      </div>
                   </div>
                   <div class="form-group" id="bob">
                      <label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name"> Package List : 
                      </label> 
                      <div class="col-md-6 col-sm-6 col-xs-12">
                         <select name="PACKAGE_ID_STREAMYX" class="form-control" onmousedown="this.value='';" onchange="jsFunction(this.value);" >
                            <option disabled selected value> -- select an option -- </option>
                            <?php 
                               $result = mysqli_query($conn,"select * from streamyx ORDER BY PACKAGE_NAME ASC"); 
                               while($row=mysqli_fetch_assoc($result)) 
                               {?> 
                            <option value="<?php echo $row["PACKAGE_NAME"]; ?>"> <?php echo $row["PACKAGE_NAME"]; ?></option>
                            <?php 
                               } 
                               ?> 
                         </select>
                      </div>
                   </div>
                   <div class="form-group" id="kok">
                      <label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name"> Package List : 
                      </label> 
                      <div class="col-md-6 col-sm-6 col-xs-12">
                         <select name="PACKAGE_ID_WEBE" class="form-control" onmousedown="this.value='';" onchange="jsFunction(this.value);" >
                            <option disabled selected value> -- select an option -- </option>
                            <?php 
                               $result = mysqli_query($conn,"select * from webe ORDER BY PACKAGE_NAME ASC"); 
                               while($row=mysqli_fetch_assoc($result)) 
                               {?> 
                            <option value="<?php echo $row["PACKAGE_NAME"]; ?>"> <?php echo $row["PACKAGE_NAME"]; ?></option>
                            <?php 
                               } 
                               ?> 
                         </select>
                      </div>
                   </div>
                   <div class="form-group" id="joj">
                      <label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name"> Package List : 
                      </label> 
                      <div class="col-md-6 col-sm-6 col-xs-12">
                         <select name="PACKAGE_ID_DOME" class="form-control" onmousedown="this.value='';" onchange="jsFunction(this.value);" >
                            <option disabled selected value> -- select an option -- </option>
                            <?php 
                               $result = mysqli_query($conn,"select * from dome ORDER BY PACKAGE_NAME ASC"); 
                               while($row=mysqli_fetch_assoc($result)) 
                               {?> 
                            <option value="<?php echo $row["PACKAGE_NAME"]; ?>"> <?php echo $row["PACKAGE_NAME"]; ?></option>
                            <?php 
                               } 
                               ?> 
                         </select>
                      </div>
                   </div>
                   <button type="submit" class="btn btn-success" name="subtn">Submit</button> 
                </form>

this is my javascript to hide the certain id

            <script> 
        function jsFunction(value) 
        { 
        var a = document.getElementById('beb'); 
        if ((value) == 'UNIFI') 
        { 
        a.style.display = ''; 
        } 
        else if((value) == 'STREAMYX') 
        { 
        a.style.display = 'none'; 
        a.value = ''; 
        } 
        else if((value) == 'WEBE') 
        { 
        a.style.display = 'none'; 
        a.value = ''; 
        } 
        else if((value) == 'LEASE LINE') 
        { 
        a.style.display = 'none'; 
        a.value = ''; 
        } 
        var a = document.getElementById('bob'); 
        if ((value) == 'UNIFI') 
        { 
        a.style.display = 'none'; 
        a.value = ''; 
        } 
        else if((value) == 'STREAMYX') 
        { 
        a.style.display = ''; 
        } 
        else if((value) == 'WEBE') 
        { 
        a.style.display = 'none'; 
        a.value = ''; 
        } 
        else if((value) == 'LEASE LINE') 
        { 
        a.style.display = 'none'; 
        a.value = ''; 
        } 
        var a = document.getElementById('kok'); 
        if ((value) == 'UNIFI') 
        { 
        a.style.display = 'none'; 
        } 
        else if((value) == 'STREAMYX') 
        { 
        a.style.display = 'none'; 
        } 
        else if((value) == 'WEBE') 
        { 
        a.style.display = ''; 
        } 
        else if((value) == 'LEASE LINE') 
        { 
        a.style.display = 'none'; 
        } 
        var a = document.getElementById('joj'); 
        if ((value) == 'UNIFI') 
        { 
        a.style.display = 'none'; 
        } 
        else if((value) == 'STREAMYX') 
        { 
        a.style.display = 'none'; 
        } 
        else if((value) == 'WEBE') 
        { 
        a.style.display = 'none'; 
        } 
        else if((value) == 'LEASE LINE') 
        { 
        a.style.display = ''; 
        } 
        }
        </script>

Answer 1

In referenece of https://www.w3schools.com/php/php_ajax_database.asp

<html>
    <head>
    <script>
    function showdata(str) {
        if (str == "") {
            document.getElementById("txtHint").innerHTML = "";
            return;
        } else { 
            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else {
                // code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("txtHint").innerHTML = this.responseText;
                }
            };
            xmlhttp.open("GET","getdata.php?q="+str,true);
            xmlhttp.send();
        }
    }
    </script>
    </head>
    <body>

    <form>
    <select name="PACKAGE_CATEGORY" class="form-control" onmousedown="this.value='';" onchange="showdata(this.value) required id="streamSelect">
     <option disabled selected value> -- select an option -- </option>
     <option value="UNIFI">Unifi</option>
     <option value="STREAMYX">Streamyx</option>
     <option id="myDIV" value="WEBE">Webe</option>
     <option id="myDIVA" value="LEASE LINE">Lease Line(DOME)</option>
   </select>
    </form>
    <br>
    <div id="txtHint"></div>   
    </body>
    </html>

getdata.php

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<?php
$q = intval($_GET['q']);

$con = mysqli_connect('localhost','peter','abc123','my_db');
if (!$con) {
    die('Could not connect: ' . mysqli_error($con));
}

mysqli_select_db($con,"ajax_demo");
$sql="select * from unifi  WHERE PACKAGE_CATEGORY = '".$q."' ";
$result = mysqli_query($con,$sql);


echo"<select name="PACKAGE_ID_UNIFI" class="form-control" onmousedown="this.value='';" onchange="jsFunction(this.value);">"

while($row = mysqli_fetch_array($result)) {
 echo"<option value="<?php echo $row["no"]; ?>"> <?php echo $row["PACKAGE_NAME"]; ?></option>"  
}

mysqli_close($con);
?>
</body>
</html>

Hope this works

Answer 2

This answer is as per your request..and to be honest it not the good way to do it.

<div class="col-md-6 col-sm-6 col-xs-12">
           <select name="PACKAGE_CATEGORY" id="PACKAGE_CATEGORY" class="form-control" onmousedown="this.value='';" onchange="jsFunction(this.value);" required id="streamSelect">
             <option disabled selected value> -- select an option -- </option>
             <option value="UNIFI">Unifi</option>
             <option value="STREAMYX">Streamyx</option>
             <option id="myDIV" value="WEBE">Webe</option>
             <option id="myDIVA" value="LEASE LINE">Lease Line(DOME)</option>
           </select>
        </div>

        <div class="col-md-6 col-sm-6 col-xs-12" id="UNIFI" style="display: none" >
          <select name="PACKAGE_ID_UNIFI" class="form-control" onmousedown="this.value='';" onchange="jsFunction(this.value);">
             <option disabled selected value> -- select an option -- </option>
                  <?php
                   $result = mysqli_query($conn,"select * from unifi WHERE PACKAGE_CATEGORY ="UNIFI" ORDER BY PACKAGE_NAME ASC");
                   while ($row=mysqli_fetch_assoc($result))
                   {?>
             <option value="<?php echo $row["no"]; ?>"> <?php echo $row["PACKAGE_NAME"]; ?></option>
                    <?php
                    }
                    ?>
          </select>
        </div>

    <div class="col-md-6 col-sm-6 col-xs-12" id="STREAMYX" style="display: none" >
          <select name="PACKAGE_ID_UNIFI" class="form-control" onmousedown="this.value='';" onchange="jsFunction(this.value);">
             <option disabled selected value> -- select an option -- </option>
                  <?php
                   $result = mysqli_query($conn,"select * from unifi WHERE PACKAGE_CATEGORY ="STREAMYX" ORDER BY PACKAGE_NAME ASC");
                   while ($row=mysqli_fetch_assoc($result))
                   {?>
             <option value="<?php echo $row["no"]; ?>"> <?php echo $row["PACKAGE_NAME"]; ?></option>
                    <?php
                    }
                    ?>
          </select>
        </div>
    <div class="col-md-6 col-sm-6 col-xs-12" id="WEBE" style="display: none" >
          <select name="PACKAGE_ID_UNIFI" class="form-control" onmousedown="this.value='';" onchange="jsFunction(this.value);">
             <option disabled selected value> -- select an option -- </option>
                  <?php
                   $result = mysqli_query($conn,"select * from unifi WHERE PACKAGE_CATEGORY ="WEBE" ORDER BY PACKAGE_NAME ASC");
                   while ($row=mysqli_fetch_assoc($result))
                   {?>
             <option value="<?php echo $row["no"]; ?>"> <?php echo $row["PACKAGE_NAME"]; ?></option>
                    <?php
                    }
                    ?>
          </select>
        </div>
    <div class="col-md-6 col-sm-6 col-xs-12" id="LEASE" style="display: none">
          <select name="PACKAGE_ID_UNIFI" class="form-control" onmousedown="this.value='';" onchange="jsFunction(this.value);">
             <option disabled selected value> -- select an option -- </option>
                  <?php
                   $result = mysqli_query($conn,"select * from unifi WHERE PACKAGE_CATEGORY ="LEASE LINE" ORDER BY PACKAGE_NAME ASC");
                   while ($row=mysqli_fetch_assoc($result))
                   {?>
             <option value="<?php echo $row["no"]; ?>"> <?php echo $row["PACKAGE_NAME"]; ?></option>
                    <?php
                    }
                    ?>
          </select>
        </div>

on your js file

$(document).ready(function () {
 $("select#PACKAGE_CATEGORY").change(function(){
    var selectedtype = $("#PACKAGE_CATEGORY option:selected").val();
    if(selectedtype=="UNIFI"){
        $("#UNIFI").show();
        $("#STREAMYX").hide();
        $("#WEBE").hide();
        $("#LEASE").hide();

        }
    else
    {
        $("#UNIFI").hide();
    }
    if(selectedtype=="STREAMYX")
    {
        $("#STREAMYX").show();
        $("#UNIFI").hide();
        $("#WEBE").hide();
        $("#LEASE").hide();
    }
    else
    {
        $("#STREAMYX").hide();
    }
    if(selectedtype=="WEBE")
    {
        $("#STREAMYX").hide();
        $("#UNIFI").hide();
        $("#WEBE").show();
        $("#LEASE").hide();
    }
    else
    {
      $("#WEBE").hide();
    }
    if(selectedtype=="LEASE")
    {
        $("#STREAMYX").hide();
        $("#UNIFI").hide();
        $("#WEBE").hide();
        $("#LEASE").show();
    }
    else
    {
        $("#LEASE").hide();
    }

    });
});