gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 17:49:24 25 4
gpt4 key购买 nike

我有一个如下所示的 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 查询,这意味着名称的实际值并不重要,因为它将获取给定组合的正确值。

最佳答案

如果数据集保持与当前一样小,那么您可以获取行并从中组成一个 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>

Link to jsbin使用硬编码的 json 硬编码。

关于javascript - 将页面上的文本更改为多个下拉列表中的 SQL 结果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21493252/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com