javascript - 如何将所有选定的选项传递给动态下拉列表中的下一个选择？
问题描述
我正在尝试创建一个从我的数据库中动态填充的下拉列表。有 9 个下拉列表，第 10 个应根据上述选择自动打印产品编号。
该代码当前起作用，但只是部分起作用。它只会使用前一个选择中的数据来填充下一个列表；而不是引用所有以前的选择。所有数据都在数据库中的单个表上。
这导致选项在列表中显示得更靠后，鉴于以前的选择，这些选项应该不再可用，并且第 10 位的产品编号吐出大量产品编号，因为它仅引用其上方的选择。
我需要每个选项选择被它之后的每个选择引用。
我尝试将 '".$_POST['']."' 添加到我的 select 语句和 where 子句中以尝试引用以前的选择，但它要么不返回任何内容，要么导致内部服务器错误。
我不确定这是否是正确的轨道，或者我的代码中缺少什么来完成这项工作。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Product Builder Tool</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".product_type").change(function()
{
var product_type=$(this).val();
var dataString = 'product_type='+ product_type;
$.ajax
({
type: "POST",
url: "get_ajax.php",
data: dataString,
cache: false,
success: function(html)
{
$(".voltage").html(html);
}
});
});
$(".voltage").change(function()
{
var voltage=$(this).val();
var dataString = 'voltage='+ voltage;
$.ajax
({
type: "POST",
url: "get_ajax.php",
data: dataString,
cache: false,
success: function(html)
{
$(".capacity").html(html);
}
});
});
$(".capacity").change(function()
{
var capacity=$(this).val();
var dataString = 'capacity='+ capacity;
$.ajax
({
type: "POST",
url: "get_ajax.php",
data: dataString,
cache: false,
success: function(html)
{
$(".modes").html(html);
}
});
});
$(".modes").change(function()
{
var modes=$(this).val()
var dataString = 'modes='+ modes;
$.ajax
({
type: "POST",
url: "get_ajax.php",
data: dataString,
cache: false,
success: function(html)
{
$(".connection").html(html);
}
});
});
$(".connection").change(function()
{
var connection=$(this).val();
var dataString = 'connection='+ connection;
$.ajax
({
type: "POST",
url: "get_ajax.php",
data: dataString,
cache: false,
success: function(html)
{
$(".status").html(html);
}
});
});
$(".status").change(function()
{
var status=$(this).val();
var dataString = 'status='+ status;
$.ajax
({
type: "POST",
url: "get_ajax.php",
data: dataString,
cache: false,
success: function(html)
{
$(".enclosure").html(html);
}
});
});
$(".enclosure").change(function()
{
var enclosure=$(this).val();
var dataString = 'enclosure='+ enclosure;
$.ajax
({
type: "POST",
url: "get_ajax.php",
data: dataString,
cache: false,
success: function(html)
{
$(".ul_type").html(html);
}
});
});
$(".ul_type").change(function()
{
var ul_type=$(this).val();
var dataString = 'ul_type='+ ul_type;
$.ajax
({
type: "POST",
url: "get_ajax.php",
data: dataString,
cache: false,
success: function(html)
{
$(".options").html(html);
}
});
});
$(".options").change(function()
{
var options=$(this).val();
var dataString = 'options='+ options;
$.ajax
({
type: "POST",
url: "get_ajax.php",
data: dataString,
cache: false,
success: function(html)
{
$(".product_number").html(html);
}
});
});
$(".product_number").change(function()
{
var product_number=$(this).val();
var dataString = 'product_number='+ product_number;
$.ajax
({
type: "POST",
url: "get_ajax.php",
data: dataString,
cache: false,
success: function(html)
{
$(".price").html(html);
}
});
});
$(".price").change(function()
{
var price=$(this).val();
var dataString = 'price='+ price;
$.ajax
({
type: "POST",
url: "get_ajax.php",
data: dataString,
cache: false,
success: function(html)
{
$(".picture_link").html(html);
}
});
});
});
</script>
<style>
label
{
font-weight:bold;
padding:10px;
}
div
{
margin-top:100px;
}
select
{
width:400px;
height:35px;
border:2px solid #456879;
border-radius:10px;
}
.color {
color:blue;
}
.link {
color:red;
}
</style>
</head>
<body>
<h1 align="center" class="color">Product Builder Tool</h1>
<center>
<div>
<label>Product Type:</label>
<select distinct name="product_type" class="product_type">
<option selected="selected">--Select Product Type--</option>
<?php
$stmt = $DB_con->prepare("SELECT DISTINCT product_type FROM surge_unit");
$stmt->execute();
while($row=$stmt->fetch(PDO::FETCH_ASSOC))
{
?>
<option value="<?php echo $row['product_type']; ?>"><?php echo $row['product_type']; ?></option>
<?php
}
?>
</select>
<br><br>
<label>Voltage and Phase:</label> <select name="voltage" class="voltage">
<option selected="selected">--Select Voltage and Phase--</option>
</select>
<br><br>
<label>Capacity:</label> <select name="capacity" class="capacity">
<option selected="selected">--Select Capacity--</option>
</select>
</select>
<br><br>
<label>Modes:</label> <select name="modes" class="modes">
<option selected="selected">--Select Modes Protected--</option>
</select>
</select>
<br><br>
<label>Connection Type:</label> <select name="connection" class="connection">
<option selected="selected">--Select Connection Type--</option>
</select>
</select>
<br><br>
<label>Status Indication:</label> <select name="status" class="status">
<option selected="selected">--Select Status Indication--</option>
</select>
</select>
<br><br>
<label>Enclosure:</label> <select name="enclosure" class="enclosure">
<option selected="selected">--Select Enclosure--</option>
</select>
</select>
<br><br>
<label>UL 1449 Location Type:</label> <select name="ul_type" class="ul_type">
<option selected="selected">--Select UL 1449 Type--</option>
</select>
</select>
<br><br>
<label>Options:</label> <select name="options" class="options">
<option selected="selected">--Select Options--</option>
</select>
<br>
<label>Product Number:</label>
<echo selected="selected" name="product_number" class="product_number">Product Number</echo>
<br><br><br>
</div>
<br />
</center>
</body>
</html>这是 AJAX 的获取文件。
<?php
include('dbconfig.php');
if($_POST['product_type'])
{
$voltage=$_POST['product_type'];
$stmt = $DB_con->prepare("SELECT DISTINCT voltage FROM surge_unit WHERE product_type=:product_type");
$stmt->execute(array('product_type' => $voltage));
?><option selected="selected">Select Voltage & Phase</option><?php
while($row=$stmt->fetch(PDO::FETCH_ASSOC))
{
?>
<option value="<?php echo $row['voltage']; ?>"><?php echo $row['voltage']; ?></option>
<?php
}
}
if($_POST['voltage'])
{
$capacity=$_POST['voltage'];
$stmt = $DB_con->prepare("SELECT DISTINCT capacity
FROM surge_unit WHERE voltage =:voltage" );
$stmt->execute(array('voltage' => $capacity));
?><option selected="selected">Select Capacity</option>
<?php while($row=$stmt->fetch(PDO::FETCH_ASSOC))
{
?>
<option value="<?php echo $row['capacity']; ?>"><?php echo $row['capacity']; ?></option>
<?php
}
}
if($_POST['capacity'])
{
$modes=$_POST['capacity'];
$stmt = $DB_con->prepare("SELECT DISTINCT modes FROM surge_unit WHERE capacity=:capacity");
$stmt->execute(array(':capacity' => $modes));
?><option selected="selected">Select Modes Protected</option>
<?php while($row=$stmt->fetch(PDO::FETCH_ASSOC))
{
?>
<option value="<?php echo $row['modes']; ?>"><?php echo $row['modes']; ?></option>
<?php
}
}
if($_POST['modes'])
{
$connection=$_POST['modes'];
$stmt = $DB_con->prepare("SELECT DISTINCT connection FROM surge_unit WHERE modes=:modes");
$stmt->execute(array(':modes' => $connection));
?><option selected="selected">Select Connection Type</option>
<?php while($row=$stmt->fetch(PDO::FETCH_ASSOC))
{
?>
<option value="<?php echo $row['connection']; ?>"><?php echo $row['connection']; ?></option>
<?php
}
}
if($_POST['connection'])
{
$status=$_POST['connection'];
$stmt = $DB_con->prepare("SELECT DISTINCT status FROM surge_unit WHERE connection=:connection");
$stmt->execute(array(':connection' => $status));
?><option selected="selected">Select Status Indication</option>
<?php while($row=$stmt->fetch(PDO::FETCH_ASSOC))
{
?>
<option value="<?php echo $row['status']; ?>"><?php echo $row['status']; ?></option>
<?php
}
}
if($_POST['status'])
{
$enclosure=$_POST['status'];
$stmt = $DB_con->prepare("SELECT DISTINCT enclosure FROM surge_unit WHERE status=:status");
$stmt->execute(array(':status' => $enclosure));
?><option selected="selected">Select Enclosure</option>
<?php while($row=$stmt->fetch(PDO::FETCH_ASSOC))
{
?>
<option value="<?php echo $row['enclosure']; ?>"><?php echo $row['enclosure']; ?></option>
<?php
}
}
if($_POST['enclosure'])
{
$ul_type=$_POST['enclosure'];
$stmt = $DB_con->prepare("SELECT DISTINCT ul_type FROM surge_unit WHERE enclosure=:enclosure");
$stmt->execute(array(':enclosure' => $ul_type));
?><option selected="selected">Select UL 1449 Type</option>
<?php while($row=$stmt->fetch(PDO::FETCH_ASSOC))
{
?>
<option value="<?php echo $row['ul_type']; ?>"><?php echo $row['ul_type']; ?></option>
<?php
}
}
if($_POST['ul_type'])
{
$options=$_POST['ul_type'];
$stmt = $DB_con->prepare("SELECT DISTINCT options FROM surge_unit WHERE ul_type=:ul_type");
$stmt->execute(array(':ul_type' => $options));
?><option selected="selected">Select Options</option>
<?php while($row=$stmt->fetch(PDO::FETCH_ASSOC))
{
?>
<option value="<?php echo $row['options']; ?>"><?php echo $row['options']; ?></option>
<?php
}
}
if($_POST['options'])
{
$product_number=$_POST['options'];
$stmt = $DB_con->prepare("SELECT DISTINCT product_number FROM surge_unit WHERE options=:options");
$stmt->execute(array(':options' => $product_number));
?>
<?php while($row=$stmt->fetch(PDO::FETCH_ASSOC))
{
?>
<?php echo $row['product_number']; ?><?php $row['SELECT product_number FROM surge_unit WHERE options=id9']; ?>
<?php
}
}
?>为了使这项工作正常工作，我缺少什么？我很确定我的选择语句需要在 WHERE 子句中有一堆 AND 子句，但是当我尝试时我根本无法让它发挥作用。Ajax 是否没有发送正确的信息以获取较早的选择？
解决方案
推荐阅读
- cuda - 使用带有“IF”条件的 CUDA 嵌套 for 循环并行化
- actionscript-3 - 我如何默认从列表中选择一个项目 AS3
- javascript - Stripe - 调整特定的经常性付款
- python - python中的循环依赖
- c++ - 我可以在运行时重新定义 OpenCascade/OCCT 标头中定义的 c++ 静态常量吗？
- javascript - 验证用户是否没有任何角色
- mysql - 嗨，我正在工作 Node/express.js 项目，Sequelize 作为 ORM 和 MySQL 作为 DB。谁能知道PLZ是如何固定的
- typescript - 是否可以根据特定条件从对象数组中获取类型？
- r - 跨多个数据框更改列的类别
- python - python - 不能从 os.system() 响应中获取 0