【发布时间】：2021-06-29 11:44:22
【问题描述】：
我有一个 SQL 搜索和结果页面，它提供了 3 列数据：类别、数量和价格。结果以一大块返回。我希望能够有一个包含百分比的下拉列表，然后单击其中一个数字会将价格更改该百分比。试图弄清楚如何分离结果，以便让下拉列表更改价格。我假设我需要以某种方式在价格中添加一个 id，但我不确定我会怎么做。我也想用 PDO 来做这一切，但接下来我会试着弄清楚，现在我只想能够改变价格。这是我现在正在使用的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
<style>
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
</style>
<title>AJAX Search Example</title>
<script>
function fetch() {
// (A) GET SEARCH TERM
var data = new FormData();
data.append('search', document.getElementById("search").value);
data.append('ajax', 1);
// (B) AJAX SEARCH REQUEST
var xhr = new XMLHttpRequest();
xhr.open('POST', "2-search.php");
xhr.onload = function () {
var results = JSON.parse(this.response),
wrapper = document.getElementById("results");
if (results.length > 0) {
wrapper.innerHTML = "";
for (let res of results) {
let line = document.createElement("div");
line.innerHTML = `Category:${res['category']} - OEM #:${res['oemnumber']} - Price:$${res['price']}`;
wrapper.appendChild(line);
}
} else { wrapper.innerHTML = "No results found"; }
};
xhr.send(data);
return false;
}
</script>
</head>
<body>
<!-- (A) SEARCH FORM -->
<form onsubmit="return fetch();">
<h1>SEARCH FOR CATALYTIC CONVERTER</h1>
<input type="text" id="search" required/>
<input type="submit" value="Search"/>
</form>
<!-- (B) SEARCH RESULTS -->
<div id="results"></div>
</br>
</br>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<a href="#70">%70</a>
<a href="#60">%60</a>
<a href="#50">%50</a>
</div>
</div>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</body>
</html>所以现在所有数据都只是作为“结果”给出，我在“line.innerHTML = Category:${res['category']} - OEM #:${res['oemnumber']} - Price:$${res['price']};”中添加了一点分隔符至少标记数据，但我希望能够将下拉列表中的 javascript 直接指向“价格”数据。对此的任何帮助将不胜感激。
这是获取数据以备不时之需的 php 脚本：
<?php
// (A) DATABASE CONFIG - CHANGE TO YOUR OWN!
define('DB_HOST', '');
define('DB_NAME', '');
define('DB_CHARSET', 'utf8');
define('DB_USER', '');
define('DB_PASSWORD', '');
// (B) CONNECT TO DATABASE
try {
$pdo = new PDO(
"mysql:host=".DB_HOST.";charset=".DB_CHARSET.";dbname=".DB_NAME,
DB_USER, DB_PASSWORD, [
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC
]
);
} catch (Exception $ex) { exit($ex->getMessage()); }
// (C) SEARCH
$stmt = $pdo->prepare("SELECT * FROM `converter_prices` WHERE `category` LIKE ? OR `oemnumber` LIKE ? OR `price` LIKE ?");
$stmt->execute(["%".$_POST['search']."%", "%".$_POST['search']."%", "%".$_POST['search']."%"]);
$results = $stmt->fetchAll();
if (isset($_POST['ajax'])) { echo json_encode($results); }
我想拥有它，所以如果我点击下拉菜单上的 70%，它会将价格列更改为价值的 70%。
就像我说的，所有的结果似乎只是进入一个“结果”变量，我正在尝试将其更改为类似于此代码的内容：
<table>
<?php
$sql=$db->prepare('SELECT * FROM `converter_prices` WHERE `category` LIKE ? OR `oemnumber` LIKE ? OR `price` LIKE ?);
$sql->execute(array(':category'=>$_REQUEST[searchcategory]));
while ($row=$sql->fetch())
{
echo "<tr><td>$row[category]</td><td>$row[oemnumber]</td><td>$row[price]</td></tr>";
}
?>
</table>【问题讨论】：
-
能否请您从您获得的预期 json 结果中粘贴一些项目。既然您希望在客户端更改和编辑价格，那么按照 pdo 的说法是没有意义的，如果这就是我理解的正确你想要的吗？
-
您不需要在价格上使用 id。 DOM 导航就足够了。您可能需要添加一些 DOM 元素以帮助更轻松地查找价格。
-
另外请不要粘贴整个无聊的代码，您的示例中的 CSS 是什么？请阅读how to create a minimal, reproducible example
标签： javascript php html sql