2017-04-27 105 views
0

这是下拉选择软件包类别,例如:我选择UNIFI它会隐藏所有除UNIFI软件包列表..但是当我选择的Streamyx选定UNIFI软件包列表仍没有复位意味着我提交UNIFI和streamyx的如何根据所选下拉菜单从sql中更改下拉值

   <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> 

这是我的JavaScript来隐藏某些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> 
+0

ü可以简单地使用AJAX做到这一点.. – Vimal

+0

u能提供任何例子或链接 –

回答

1

在referenece 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> 

希望这个作品

+0

没有我的回答帮助你.. – Vimal

+0

遗憾没了.... –

+0

whats ur current status..did you get any errors – Vimal

1

这个答案是按你的request..and说实话这不是做的很好的方式。

<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> 

你的JS文件

$(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(); 
    } 

    }); 
}); 
+0

现在还不能在package list部分显示 –

相关问题