Question

我有一个类似下面的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查询，例如，意味着名称的实际值无关紧要，因为它将获取给定组合的正确值。

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

最后，您定义了一个更新结果的函数：

JS

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>

带有硬编码的json硬编码的

Link to jsbin。

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

1 个答案: