依赖于第一个选择选项更改第二个选择选项

我有两个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

依赖于第一个选择选项更改第二个选择选项

回答

相关问题