如何在动态下拉菜单中将所有选择的选项传递给下一个选择？

时间：2019-05-16 17:54:32

标签： javascript php jquery ajax database

我正在尝试创建一个从我的数据库动态填充的下拉列表。共有9个下拉列表，第10个应该根据上述选择自动打印产品编号。

该代码当前起作用，但仅部分起作用。它将仅使用前一个直接选择中的数据填充下一个列表。而不是引用所有先前的选择。所有数据都在数据库的单个表上。

这导致选项在列表中进一步向下显示，鉴于先前的选择，这些选项将不再可用，并且第10位的产品编号吐出了大量的产品编号，因为它仅引用上面的选择它。

每个选项之后，我都需要引用每个选项。

我已经尝试在我的select语句中向我的where子句中添加'“。$ _ POST [”]。“'，以尝试引用以前的选择，但是它不返回任何内容或导致内部服务器错误。

我不确定这是否是正确的方法，还是我的代码中缺少什么才能使它正常工作。

<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
	}
}
?>

要使此功能正常工作，我缺少什么？ 我很确定我的select语句在WHERE子句中需要有一堆AND子句，但是当我尝试时，根本无法使其正常工作。 Ajax是否没有发送适当的信息以使它接受较早的选择？

0 个答案:

没有答案
相关问题
最新问题