は、選択したオプションの値のみを表示します。

PHPとテーブルの操作方法を理解しようとしています。我々は持っている場合は、次のデータベースです：とき私は、今たいときは、選択したオプションの値のみを表示します。

Webpage

しかし：

tblBestemmingen

は今、私はそうのように私のWebページ内のすべての情報を表示していますオプションタグから任意の種類のオプション（土地）を選択してください。テーブルはその土地の価値のみを表示したいと思います。しかし、私はそうするか見当がつかない。..ここ

は、これまでの私のコードです：

HTML：

<?php 
 
require_once('scripts/config.php'); 
 
require_once('scripts/api.php'); 
 
session_start(); 
 
$bestemmingen = CallAPI("GET", $DB . "/tblbestemming/"); 
 
$vluchten = CallAPI("GET", $DB . "/tblvlucht"); 
 

 
$landen = array(); 
 
foreach ($bestemmingen as $bestemming) { 
 
    $landen[] = $bestemming['Land']; 
 
} 
 
$landen = array_filter(array_map('trim', $landen)); 
 
$land_uniek = array_unique($landen); 
 
sort($land_uniek); 
 
?> 
 

 
<?php require_once('views/shared/_header.inc'); ?> 
 
    <body> 
 
<header> 
 
    <?php include('views/shared/_nav.inc'); ?> 
 
</header> 
 
<main> 
 
    <div id="load"></div> 
 
    <div id="contents"> 
 
     <section class="container"> 
 
      <label for="bestemmingen">Bestemming</label> 
 
      <select class="form-control" id="bestemmingen"> 
 
       <option>Show all</option> 
 
       <?php 
 
       foreach ($land_uniek as $l_u => $key) { 
 
        echo "<option value='$l_u' name='bestemmingen'>$key</option>"; 
 
       } 
 
       ?> 
 
      </select> 
 
      <table class="table table-striped table-hover sortable"> 
 
       <thead> 
 
       <tr> 
 
        <th>Bestemming</th> 
 
        <th>Land</th> 
 
        <th>Type vlucht</th> 
 
       </tr> 
 
       </thead> 
 
       <tbody> 
 
       <?php 
 
       foreach ($bestemmingen as $bestemming) { 
 
        echo '<tr>'; 
 
        echo '<td>' . $bestemming['Voluit'] . '</td>'; 
 
        echo '<td>' . $bestemming['Land'] . '</td>'; 
 
        if ($bestemming['TypeVlucht'] == 1) { 
 
         echo '<td> Korte vlucht </td>'; 
 
        } else { 
 
         echo '<td> Lange vlucht </td>'; 
 
        } 
 
        echo '</tr>'; 
 
       } 
 
       ?> 
 
       </tbody> 
 
      </table> 
 
      </thead> 
 
      </table> 
 
     </section> 
 
    </div> 
 
</main> 
 
<?php require_once('views/shared/_footer.inc'); ?>

出典

2017-11-02 Ramon

あなたはいくつかのオプションを得ました。オプションの値で表の行にタグを付けるか（例： ''）、JSを使って一致しないものをすべて隠すだけで、ページをリロードして（WHEREを使用して）データベースから一致する行をフェッチするか、または一致する行をフェッチしてJSを使用してそのデータでテーブルを再作成するphpファイルにオプションを渡すことができます。 –

PHPで要求された機能を実装する場合、各フィルタ選択に対してページリロードが必要であることを覚えておいてください。フィルタ（選択した国）をパラメータとしてページをリロードし、対応するデータを取得するには、ポストアクションが必要です。 – Pascal

テーブルにID

を与えますすべてのTRにdata-land="'$countryname.'"を追加

その後、

彼らがこのように選択

から国が含まれている場合は、すべての行とテストを選択します。

window.onload = function() { 
 
    document.querySelector("#bestemmingen").onchange = function() { 
 
    var land = this.value; 
 
    var countryRows = document.querySelectorAll("#countryTable>tbody>tr"); 
 
    for (var i = 0; i < countryRows.length; i++) { 
 
     var row = countryRows[i], 
 
     show = land == "" || row.getAttribute("data-land") == land; 
 
     countryRows[i].style.display = show ? "" : "none"; 
 
    } 
 
    } 
 
}

<div id="contents"> 
 
    <section class="container"> 
 
    <label for="bestemmingen">Bestemming</label> 
 
    <select class="form-control" id="bestemmingen"> 
 
       <option value="">Show all</option> 
 
       <option value="Nederland">Nederland</option> 
 
       <option value="Denemarken">Denemarken</option> 
 
      </select> 
 
    <table id="countryTable" class="table table-striped table-hover sortable"> 
 
     <thead> 
 
     <tr> 
 
      <th>Bestemming</th> 
 
      <th>Land</th> 
 
      <th>Type vlucht</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr data-land="Denemarken"> 
 
      <td>DK CPH Kastrup</td> 
 
      <td>Denemarken</td> 
 
     </tr> 
 
     <tr data-land="Nederland"> 
 
      <td>NL AMS Schiphol</td> 
 
      <td>Nederland</td> 
 
     </tr> 
 
     <tr data-land="Denemarken"> 
 
      <td>DK BLL Billund</td> 
 
      <td>Denemarken</td> 
 
     </tr> 
 
     <tr data-land="Nederland"> 
 
      <td>NL RTM Rotterdam</td> 
 
      <td>Nederland</td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </section> 
 
</div>

出典

2017-11-02 15:33:12 mplungjan

'class'属性よりも' data'属性を使うほうが良いでしょう（あなたが不運ならば、実際にはclass属性が実際には有効なクラス名が含まれている場合はプレゼンテーションを変更してください）。 –

あなたはまだclass属性を追加しています。これを削除した場合でも、 'var rows = document.querySelectorAll（ 'tr'）;'のように行えます。私はそれが気難しい、私はちょうどスタイリング以外の意味を持つクラスを持っているのが好きではないかもしれません。 :-) –

テーブル上でIDを打つと、実際にはうまくいくと思います。 –

は、選択したオプションの値のみを表示します。

答えて

関連する問題