Ändern zweite Auswahloptionen abhängig von den ersten Auswahloptionen

Question

Ich habe zwei php-Schleifen, eine hat die CPU Optionen auswählen, es hat auch die Steckdose var. Die zweite ist eine andere PHP-Schleife für ein Motherboard wählen Sie Optionen, die auch die Steckdose var hat. Wenn Sie jedoch eine CPU mit Sockel LGA1151 wählen und das Motherboard einen anderen Sockel hat, muss ich die 2. Schleife (Motherboard) ändern, um nur Motherboards mit dem Sockel anzuzeigen, der der gewählten CPU entspricht.

Hier ist mein Code für die 2-Schleifen

 <li class="flip-container" style="z-index: 19;"> 
 
      <div class="flipper default"> 
 
      <div class="front"> 
 
       <h2>CPU</h2> 
 
      </div> 
 
      <div class="back" style="height:auto;width:400px;padding:15px; "> 
 
       <script> 
 
\t \t \t \t function cpuPreview(sel) { 
 
\t \t \t \t \t document.getElementById('Imgcpu').src = "" + sel.options[sel.selectedIndex].id; 
 
\t \t \t \t } 
 
\t \t \t \t </script> 
 
\t \t \t  <div class="custom-select"> 
 
\t \t \t  \t <label for="select-choice1" class="label select-1"><span class="selection-choice">Please choose something</span> </label> 
 
\t \t \t  \t <select id="cpu" name="cpu" class="select" onChange="cpuPreview(this)" > 
 
\t \t \t \t  \t <option data-price="0">Please select 1</option> 
 
\t \t \t \t  \t <?php $psut = $con->query("SELECT * FROM parts WHERE type = 'cpu'");?> 
 
    \t \t \t \t \t \t <?php while($psu = $psut->fetch_object()): ?> 
 
\t \t \t  \t \t <option id="<?= $psu->image ?>" value="<?= $psu->id ?>" data-price="<?= $psu->price ?>"><?= $psu->name ?></option> 
 
\t \t \t \t \t \t <?php endwhile;?> 
 
\t \t \t \t \t </select> 
 
\t \t \t \t </div> 
 
\t \t \t \t \t <img id='Imgcpu' src="" width="300px" height="auto"> 
 
      </div> 
 
      </div> 
 
     </li> 
 

 
     <li class="flip-container" style="z-index: 17;"> 
 
      <div class="flipper default"> 
 
      <div class="front"> 
 
       <h2>Motherboard</h2> 
 
      </div> 
 
      <div class="back" style="height:auto;width:400px;padding:15px; "> 
 
       <script> 
 
\t \t \t \t function motherboardPreview(sel) { 
 
\t \t \t \t \t document.getElementById('Imgmotherboard').src = "" + sel.options[sel.selectedIndex].id; 
 
\t \t \t \t } 
 
\t \t \t \t </script> 
 
\t \t \t  <div class="custom-select"> 
 
\t \t \t  \t <label for="select-choice1" class="label select-1"><span class="selection-choice">Please choose something</span> </label> 
 
\t \t \t  \t <select id="motherboard" name="motherboard" class="select" onChange="motherboardPreview(this)" > 
 
\t \t \t \t  \t <option data-price="0">Please select 1</option> 
 
\t \t \t \t  \t <?php $psut = $con->query("SELECT * FROM parts WHERE type = 'motherboard'");?> 
 
    \t \t \t \t \t \t <?php while($psu = $psut->fetch_object()): ?> 
 
\t \t \t  \t \t <option value="<?= $psu->id ?>" id="<?= $psu->image ?>" data-price="<?= $psu->price ?>"><?= $psu->name ?></option> 
 
\t \t \t \t \t \t <?php endwhile;?> 
 
\t \t \t \t \t </select> 
 
\t \t \t \t </div> 
 
\t \t \t \t \t <img id='Imgmotherboard' src="" width="300px" height="auto"> 
 
      </div> 
 
      </div> 
 
     </li> 

Answer 1

Als grobe Richtlinie, wie Sie vielleicht das gewünschte Ergebnis mit Ajax vielleicht erreichen folgende könnte von Nutzen sein.

<?php 
    if($_SERVER['REQUEST_METHOD']=='POST' && !empty($_POST['cpu'])){ 
     ob_clean(); 

     $dbhost = 'localhost'; 
     $dbuser = 'xxx'; 
     $dbpwd = 'xxx'; 
     $dbname = 'xxx'; 
     $con = new mysqli($dbhost, $dbuser, $dbpwd, $dbname); 



     $cpu=filter_input(INPUT_POST, 'cpu', FILTER_SANITIZE_STRING); 
     $type='motherboard'; 



     /* SQL is purely guesswork ~ */ 
     $sql='select `id`,`name` from `parts` where type=? and cpu=?'; 
     $stmt=$con->prepare($sql); 


     if($stmt){ 

      /* Bind parameters to the placeholders */ 
      $stmt->bind_param('ss', $type, $cpu); 
      $result = $con->execute(); 


      if($result){ 

       /* if the query succeeded, iterate through stored results */ 
       $stmt->bind_result($id, $name); 

       /* set header */ 
       header('Content-Type: text/html'); 

       while($stmt->fetch()){ 
        /* echo HTML content back to ajax callback */ 
        echo "<option value='$id'>$name"; 
       } 
      } 


      $stmt->free_result(); 
      $stmt->close(); 
      $con->close(); 
     } 
     exit(); 
    } 
?> 
<!doctype html> 
<html> 
    <head> 
     <title>ajax dependant select menu</title> 
     <script> 
      function getmotherboard(e){ 
       var xhr=new XMLHttpRequest(); 
       xhr.onload=function(e){ 
        board.innerHTML=xhr.response; 
       } 
       xhr.onerror=function(e){ 
        alert(e); 
       } 
       /* POST request to the same page or use url */ 
       xhr.open('POST', location.href, true); 
       xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
       xhr.send('cpu='+this.value); 
      } 


      /* using `fetch` with CORS */ 
      /* 
       In an attempt to get around the same-origin problem you 
       need to send a CORS request and the server needs to be setup 
       to allow such requests. You can make the request using the 
       now traditional ajax (XMLHttpRequest) or, in some ways easier, 
       the new `fetch` api - though it is not fully supported by allow 
       major browsers (IE & safari notably I believe) 
      */ 
      function fetchmotherboard(){ 
       var url=location.href; 
       var board=document.querySelector('select[name="motherboard"]'); 

       /* Construct payload to send in request */ 
       var data=new FormData(); 
        data.append('cpu', this.value); 

       /* configuration for the request */ 
       var config={ 
        method:'POST', 
        mode:'cors', 
        body:data, 
        credentials:'include' 
       }; 

       /* success/fail callbacks */ 
       var evtCallback=function(r){ 
        return r.text().then(function(text){ 
         board.innerHTML=text; 
        }); 
       }; 
       var evtError=function(err){ 
        console.log(err) 
       }; 

       /* Create the request object */ 
       var request=new Request(url, config); 

       /* Make the request */ 
       fetch(request).then(evtCallback).catch(evtError); 
      } 


      document.addEventListener('DOMContentLoaded',function(){ 
       var cpu=document.querySelector('select[name="cpu"]'); 
       var board=document.querySelector('select[name="motherboard"]'); 
       cpu.onchange=getmotherboard.bind(cpu); 

       /* alt version using `fetch` */ 
       cpu.onchange=fetchmotherboard.bind(cpu); 

      },false); 
     </script> 
    </head> 
    <body> 
     <form method='post'> 

      <!-- content populated from db on page load --> 
      <select name='cpu'> 
       <option value='cpu_1'>cpu_1 
       <option value='cpu_2'>cpu_2 
       <option value='cpu_3'>cpu_3 
      </select> 

      <!-- content populated dynamically --> 
      <select name='motherboard'></select> 
     </form> 
    </body> 
</html>