Javascript 允许网页上有不同值的依赖下拉html
我被困在我的网站上。我有3个下拉列表在我的HTML网页从mysql填充。例如，在我的表中，选项1、选项2、选项3、选项4、选项5列中有5个字段。在我的下拉列表中，我希望能够从下拉列表A中选择选项1，然后在下拉列表B和C中没有可用的选项1；如果我将其更改为选项2，那么选项1应该在下拉列表B和C中可用，依此类推 这样做有什么好处吗？我一直在尝试php和javascript，但没有任何运气 下面是我已经拥有的代码-仍然是新的失败 html phpJavascript 允许网页上有不同值的依赖下拉html,javascript,php,jquery,html,mysql,Javascript,Php,Jquery,Html,Mysql,我被困在我的网站上。我有3个下拉列表在我的HTML网页从mysql填充。例如，在我的表中，选项1、选项2、选项3、选项4、选项5列中有5个字段。在我的下拉列表中，我希望能够从下拉列表A中选择选项1，然后在下拉列表B和C中没有可用的选项1；如果我将其更改为选项2，那么选项1应该在下拉列表B和C中可用，依此类推 这样做有什么好处吗？我一直在尝试php和javascript，但没有任何运气 下面是我已经拥有的代码-仍然是新的失败 html php 您需要为列表中的已更改事件编写事件处理程序，并在该处理
您需要为列表中的已更改事件编写事件处理程序，并在该处理程序中计算所选项的值。一旦知道了这一点，就可以重建其他列表。这里有一个使用jQuery禁用选项（如果选项已经在另一个select元素中被选中） JS:
给我们你的代码，然后我们可以帮助你。没有人会为你写这整件事。这很有效，有没有办法从下拉列表中完全删除该选项，而不是仅仅禁用它？@Nirmie我已将其更改为隐藏/显示选项。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function()
{
$(".Qual1").change(function()
{
var id=$(this).val();
var Userid=
<?php
$connection = mysql_connect("localhost","root","") or die ("Error connecting to mysql server: ".mysql_error());
mysql_select_db("mytestdb", $connection) or die ("Error selecting specified database on mysql server: ".mysql_error());
$log_user = $_SESSION['login_user'];
$sqlquery = mysql_query("select fnGetUserID('$log_user') as UserID", $connection);
$row = mysql_fetch_assoc($sqlquery);
echo $row['UserID'];
?>;
var Circuitid =
<?php
$connection = mysql_connect("localhost","root","") or die ("Error connecting to mysql server: ".mysql_error());
mysql_select_db("mytestdb", $connection) or die ("Error selecting specified database on mysql server: ".mysql_error());
$race_name = $_SESSION['Race'];
$sqlquery = mysql_query("select fnGetCircuitID('$race_name') as RaceID", $connection);
$row = mysql_fetch_assoc($sqlquery);
echo $row['RaceID'];
?>;
<?php echo json_encode($_SESSION['Race']); ?>;
var dataString = 'id='+id+'&Userid='+Userid+'&Circuitid='+Circuitid;
//alert(dataString);
$.ajax
({
type: "POST",
url: "ajaxDrivers.php",
data: dataString,
cache: false,
success: function(html)
{
$(".Qual2").html(html);
}
});
});
});
</script>
<title>Your Home Page</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="profile">
<b id="Go Back"><a href="profile.php">Go Back</a></b>
<br>
<br>
<b id="welcome">Making Picks for : <i><?php echo $_SESSION['Race'] ?></i></b>
<br>
<br>
</div>
<form action="">
<table>
<tr>
<td colspan='2'>Prediction Form</td>
</tr>
<tr>
<td>Qualifying 1:</td>
<td>
<select id="Qual1" name="Qual1" class="Qual1">
<?php
$log_user = $_SESSION['login_user'];
$connection = mysql_connect("localhost","root","") or die ("Error connecting to mysql server: ".mysql_error());
mysql_select_db("mytestdb", $connection) or die ("Error selecting specified database on mysql server: ".mysql_error());
// Get the UserID
$sqlquery = mysql_query("select fnGetUserID('$log_user') as UserID", $connection);
$row = mysql_fetch_assoc($sqlquery);
$_SESSION['intUserID'] =$row['UserID'];
// Unset Variable to be ised again
unset($sqlquery);
unset($row);
$race_name = $_SESSION['Race'];
// Get the UserID
$sqlquery = mysql_query("select fnGetCircuitID('$race_name') as RaceID", $connection);
$row = mysql_fetch_assoc($sqlquery);
$_SESSION['intRaceID'] =$row['RaceID'];
$race_id = $_SESSION['intRaceID'];
$user_id = $_SESSION['intUserID'];
$qual1 = mysql_query("CALL spGetDrivers($user_id,$race_id)");
//$rows = mysql_query($qual1) or die ("Query to get data from firsttable failed: ".mysql_error());
while($rs=mysql_fetch_array($qual1)){
echo '<option value="'.$rs['pkDriverID'].'">'.$rs["strDriverName"].'</option>';
}
?>
</select>
</td>
</tr>
<tr>
<td>Qualifying 2:</td>
<td>
<select id="Qual2" name="Qual2" class="Qual2">
<option selected="selected">--Select Driver--</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
<?php
header('Content-Type: text/html; charset=ISO-8859-15');
$connection = mysql_connect("localhost","root","") or die ("Error connecting to mysql server: ".mysql_error());
mysql_select_db("mytestdb", $connection) or die ("Error selecting specified database on mysql server: ".mysql_error());
if($_POST['id'])
{
$id=$_POST['id'];
$userID=$_POST['Userid'];
$CircuitID=$_POST['Circuitid'];
$rs=mysql_query("CALL spInTempDriver($userID,$CircuitID,$id)");
//echo '<option value="'.$CircuitID.'">'.$CircuitID.'</option>';
$sql=mysql_query("CALL spGetDrivers($user_id,$CircuitID)");
while($row=mysql_fetch_array($sql))
{
$id=$row['pkDriverID'];
$data=$row['strDriverName'];
echo '<option value="'.$id.'">'.$data.'</option>';
}
}
?>
$(function() {
$("select").on("change", function() { // select on change event
var selectedValues = []; // array of all the values selected by any select element
$("select > option:selected").each(function() {
var val = $(this).val();
if (val != "") { // exlude the value if it is ""
selectedValues.push(val);
}
});
$("select").not($(this)).each(function() { // for each other select element
var selectedValue = $(this).val(); // value of the currently selected option for this select element
$(this).find("option").each(function() { // for each option
if ($(this).val() != selectedValue && selectedValues.indexOf($(this).val()) > -1) { // disable only if not the currently selected option and if it is selected by a select element
$(this).hide();
} else {
$(this).show(); // else show the option if it is hidden
}
});
});
});
});