将页面上的文本更改为来自多个下拉列表的 SQL 结果

Posted 2023-03-23

技术标签:

【中文标题】将页面上的文本更改为来自多个下拉列表的 SQL 结果【英文标题】：Change text on page to SQL result from multiple dropdowns 【发布时间】：2014-02-01 02:02:59 【问题描述】：

我有一个类似于下面的 SQL 表：

  Name  │ Favorite Color │  Age  │  Pet
────────┼────────────────┼───────┼───────
 Rupert │     Green      │  21   │  Cat
  Mike  │      Red       │  19   │  Dog
 Rachel │     Purple     │  24   │  Cat
 Thomas │      Red       │  21   │  Fish
  ...   |      ...       |  ...  |  ...

还有两个下拉菜单：

<select>
    <option selected="selected" disabled="disabled">Choose Pet</option>
    <option>Cat</option>
    <option>Dog</option>
    <option>Fish</option>
</select>

<select>
    <option selected="selected" disabled="disabled">Choose Color</option>
    <option>Red</option>
    <option>Green</option>
    <option>Purple</option>
</select>

我想从两个下拉列表中显示喜欢任何给定组合的人。

//if cat and green selected, print Rupert
//if fish and red selected, print Thomas
//etc

我对此并没有真正的游戏计划，我有点卡住了。我该怎么办？需要注意的一点是，理想情况下，我希望通过 SQL 获取信息，而不是将它们硬编码到页面中，所以如果一个人的名字发生了变化，则不需要重写任何内容。

$name = $db->prepare("
    SELECT name
        FROM people
        WHERE color = :col
        AND pet = :pet
");
$name->execute(array(
    ':col' => some value from one dropdown
    ':pet' => some value from another dropdown
));

这是一个在下拉列表更改时执行的 SQL 查询，例如，这意味着名称的实际值无关紧要，因为它会获取对给定组合正确的任何内容。

【问题讨论】：

【参考方案1】：

如果数据集将保持与当前一样小，那么您可以获取行并从中组成一个 json 对象并将其嵌入到页面中，然后您可以让 javascript 查找选择并相应地更改名称.

但是如果您希望行会增长到太多而无法嵌入到页面中，那么正如您所说，您可以实现远程搜索并将选择发送到 php 脚本，然后该脚本将返回名称。

对于您可以采用的第一种方法：

JSON

var selections = 
  'Cat-Green': 'Rubert',
  'Dog-Red': 'Mike',
  ... 
;

那么你最好给选择一个 id 以便于获取它们的值：

标记

<select id="pet" onchange="update();">
    <option selected="selected" disabled="disabled">Choose Pet</option>
    <option>Cat</option>
    <option>Dog</option>
    <option>Fish</option>
</select>

<select id="color" onchange="update();">
    <option selected="selected" disabled="disabled">Choose Color</option>
    <option>Red</option>
    <option>Green</option>
    <option>Purple</option>
</select>

<span id="result"></span>

最后定义一个函数来更新结果：

function update() 
  var key = $("#pet").val() + '-' + $("#color").val();
  $("#result").text(selections[key]);

在后端，当提供页面时，你会像这样解析 json 对象：

整个脚本

<?php
// create your db link, then
$query  = "SELECT * FROM `favorites` LIMIT 50"; // just in case
$result = mysqli($link, $query);
$array  = array(); // empty array to be filled with data
while($row=mysqli_fetch_assoc($result)) 
  // Name  │ Favorite Color │  Age  │  Pet
  $array[$row['Pet'] . '-' . $row['Color']] = $row['Name'];

$json = json_encode($array); // convert array to json string
// we are done. Next we close PHP and start outputing html, JS and our JSON
?>
<!DOCTYPE html>
<html>
<head>
  ...
  <script src=" ... remember to add jquery ... ></script>
  <script>
    var selections = <?php echo $json; ?>;
    ...
    function update ...
  </script>
</head>
<body>
  <select id="pet" onchange="update();">
  ...
</body>
</html>

Link to jsbin 带有硬编码的 json 硬编码。

【讨论】：

谢谢！这给了我一个很好的基本方法。只是好奇：如果宠物的名称和颜色的名称是动态的（因为它们可以通过 SQL 更改），那么这种方法将不起作用，因为组合本质上是硬编码的。有没有办法 JSON 可以与 SQL 交互，以便我可以将代码的第一个 sn-p 初始化为 SQL 中的元素？ @riista 好吧，假设您在页面加载时根据数据库表的内容构建 JSON 对象。如果您担心在用户加载页面后它们会被更改，那么您必须使用远程搜索方法，但如果数据不是那么易变并且只是偶尔更改，您可以假设用户有过时数据的机会不高（假设有人连续几天没有打开标签）。

以上是关于将页面上的文本更改为来自多个下拉列表的 SQL 结果的主要内容，如果未能解决你的问题，请参考以下文章

根据单选按钮选择将下拉菜单的值和显示名称更改为 SQL 查询结果

将 WooCommerce 城市字段更改为前端和管理中的下拉列表

如何将数据绑定下拉列表中的选定项目置于会话状态？

如何在不更改现有组件文件的情况下通过插件将日期类型更改为下拉列表

jQuery UI datepicker：如何将下拉列表中的月份名称从短名称更改为长名称？