如何使用 HTML 列表框和 SQL 代码显示表格中的某些列？

Posted 2023-05-09

【中文标题】如何使用 HTML 列表框和 SQL 代码显示表格中的某些列？

【英文标题】：How to display certain columns from a table using HTML listbox and SQL code?

【发布时间】：2018-09-03 11:30:41

【问题描述】：

您好，我有以下请求：包含 2 列的表格：国家和资本。该表包含世界上每个国家的每个首都。有一个列表框，我可以在其中选择国家，它只会显示该国家的首都。

我用 html 创建了一个列表框，让我可以选择一个国家/地区：

< select> <br>
< option Country = "Brasil"> Brasil < /option> <br>
< option Country = "... "> .. < /option> <br>
< /select> </br>

如何使用该 HTML 列表框中的国家/地区显示首都？我正在考虑为每个首都创建一个选项，但是我需要超过 120 个 if-cases。 （在 SQL 中）

【问题讨论】：

Populating select option dynamically with jquery的可能重复

【参考方案1】：

可以生成选择表单：

<?php 
$req = $pdo->query('SELECT * FROM table');
$rep = $req->fetchAll(); ?>
<select>
foreach($rep as $row)  ?>
  <option value="<?= $row['country'] ?>"><?= $row['country'] ?></option>
<?  ?>
</select>
<?php foreach($rep as $row)  
  <input style="display:none" id="<?= $row['country'] ?>" value="<?= $row['capital'] ?>" />
<?php  ?>

因此，您将拥有所有国家/地区的选择，以及每个首都的输入，其国家/地区作为 id，因此您可以使用 javascript 显示它：（jQuery 示例）

<script>
$('select').change(function() 
  $('input:visible').toggle(); 
  $('input[id='+$(this).val()+']').toggle();
);
</script>

【参考方案2】：

您可以使用php中的以下代码从数据库中获取国家和首都

//This is where you put the fetched data
$entries = Array();

//Make new connection
$connection  = new mysqli("127.0.0.1", "username", "password", "databasename");

//Create prepared statement
$statement = $connection->prepare("SELECT `country`, `capital` FROM `table`");
$statement->bind_result($country, $capital);

//Put the fetched data in the result array
while($statement->fetch()) 
  $entry = Array();

  $entry['country'] = $country;
  $entry['capital'] = $capital;

  $entries[] = $entry;


//Close the statement and connection
$statement->close();
$connection->close(); 

接下来，您制作 HTML select 对象。重要的是，国家的顺序与首都的顺序保持一致。

<!-- Country selection -->
<select id="select-country">
 <?php $i = 0;
       foreach ($entries as $c)  ?>
       <option data-country="<?php echo $i++; ?>"><?php echo $c['country'] ?></option>
   <?php  ?>
</select>

<!-- Capitals select -->
<select id="select-capital">
  <?php $i = 0;
       foreach ($entries as $c)  ?>
        <option data-capital="<?php echo $i++ ?>"><?php echo $c['capital'] ?></option>
   <?php  ?>
</select>

最后，您向select 添加一个事件侦听器，ID 为select-country，您可以在其中侦听change 事件。一旦调用，您将第二个select 的选定索引更改为第一个的索引。这就是为什么顺序保持不变很重要的原因。

<script>
        document.getElementById('select-country').addEventListener('change', function () 
            document.getElementById('select-capital').getElementsByTagName('option')[this.selectedIndex].selected = true;
        );
</script>