依賴於第一個選擇選項更改第二個選擇選項

我有兩個php循環，一個有CPU選擇選項，它也有套接字變量。第二個是另一個用於主板選擇選項的php循環，它也具有socket var。但是，如果你選擇一個帶有LGA1151插座的CPU，並且主板上有另一個不同的插座，那麼我需要第二個環路（主板）更換爲只顯示與所選CPU相同插座的主板。依賴於第一個選擇選項更改第二個選擇選項

這裏是我的代碼爲2循環

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

來源

2017-08-06 Casper Round

你需要使用AJAX功能來查詢數據庫，並填充第二個下拉菜單 – RamRaider

或者你可以把所有可能的值到第二下拉菜單，只顯示你想要的人。 – BlobbyBob

[顯示基於上一個下拉選擇的第二個下拉菜單]的可能重複（https://stackoverflow.com/questions/6954556/show-a-second-dropdown-based-on-previous-dropdown-selection） –

作一個粗略的你怎麼可能用ajax或許下面可能是使用的達到預期的效果。

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

來源

2017-08-06 09:08:29 RamRaider

我改變了代碼，並把PHP放在一個單獨的文檔，但我不斷收到此錯誤： XMLHttpRequest無法加載https://www.atxcustoms.co.uk/mother_check.php 。請求的資源上沒有「Access-Control-Allow-Origin」標題。原因'https://dev.atxcustoms.co.uk'因此不被允許訪問。該響應具有HTTP狀態代碼404. –

好的 - 這是一個CORS問題。我假設你正在將請求發送到同一個域/服務器 - 大概情況並非如此？ – RamRaider

依賴於第一個選擇選項更改第二個選擇選項

回答

相關問題