堆棧內存溢出
  簡體   English   中英

如何根據所選下拉列表從SQL更改下拉列表值

[英]how to change dropdown value take from sql based on selected dropdown

 原文  2017-04-27 05:00:54  0   2    javascript/ php/ html

問題描述

例如，這是下拉選擇包類別。 我選擇統一，它將隱藏除統一軟件包列表以外的所有文件。 

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

2 個解決方案

解決方案1
 1  2017-04-27 06:00:23

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

希望這行得通

解決方案2
 1  2017-04-27 07:28:27

這個答案是根據您的要求。老實說，這不是一個好方法。 

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

    });
});

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何根據值更改下拉菜單的選定值 如何在 Angular 8 中為 ngSubmit() 獲取選定的下拉值？ 如何根據數據庫中的值在下拉列表中選擇一個值 更改下拉菜單的“選定值” 如何根據第一個下拉菜單中選擇的值在第二個下拉菜單中選擇一個值？ 這兩個值都來自數據庫 如何從下拉列表中獲取所選值並將其粘貼到SQL查詢 如何根據另一個下拉菜單中選擇的值填充一個下拉菜單？ 如何根據先前的下拉選擇值填充下拉列表 如何根據從上一個[以上]下拉列表中選擇的值來填充select2下拉列表中的選項？ 根據在另一個下拉列表中選擇的值填充下拉列表
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM