我正在尝试使主题添加或不添加类型Web应用程序。当用户在第一个下拉列表中选择一个主题时，它不应该显示在第二个下拉列表中，并且在第一个下拉列表中应该有一个按钮（ - ）在一侧以删除所选主题。任何人都可以告诉我如何在Jquery中做到这一点。
码
<?php
//index.php
$connect = new PDO("mysql:host=localhost;dbname=testing4", "root", "Lomass");
function fill_unit_select_box($connect)
{
$output = '';
$query = "SELECT * FROM tbl_unit";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
foreach($result as $row)
{
$output .= '<option value="'.$row["unit_name"].'">'.$row["unit_name"].'</option>';
}
return $output;
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Add Subjects</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<br />
<div class="container">
<h3 align="center">Add Subjects</h3>
<br />
<h4 align="center">Enter Item Details</h4>
<br />
<form method="post" id="insert_form">
<div class="table-repsonsive">
<span id="error"></span>
<table class="table table-bordered" id="item_table">
<tr>
<th>Select Subjects</th>
<th><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span></button></th>
</tr>
</table>
<!-- <div align="center">
<input type="submit" name="submit" class="btn btn-info" value="Insert" />
</div>-->
</div>
</form>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$(document).on('click', '.add', function(){
var html = '';
html += '<tr>';
html += '<td><select name="item_unit[]" class="form-control item_unit"><option value="">Select Subject</option><?php echo fill_unit_select_box($connect); ?></select></td>';
html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
$('#item_table').append(html);
});
$(document).on('click', '.remove', function(){
$(this).closest('tr').remove();
});
$('#insert_form').on('submit', function(event){
event.preventDefault();
var error = '';
$('.item_name').each(function(){
var count = 1;
if($(this).val() == '')
{
error += "<p>Enter Item Name at "+count+" Row</p>";
return false;
}
count = count + 1;
});
$('.item_quantity').each(function(){
var count = 1;
if($(this).val() == '')
{
error += "<p>Enter Item Quantity at "+count+" Row</p>";
return false;
}
count = count + 1;
});
$('.item_unit').each(function(){
var count = 1;
if($(this).val() == '')
{
error += "<p>Select Unit at "+count+" Row</p>";
return false;
}
count = count + 1;
});
var form_data = $(this).serialize();
if(error == '')
{
$.ajax({
url:"insert.php",
method:"POST",
data:form_data,
success:function(data)
{
if(data == 'ok')
{
$('#item_table').find("tr:gt(0)").remove();
$('#error').html('<div class="alert alert-success">Item Details Saved</div>');
}
}
});
}
else
{
$('#error').html('<div class="alert alert-danger">'+error+'</div>');
}
});
});
</script>
这是问题所在：
$('#firstSelect' ).change(function(){
var firstValue=$('#firstSelect').val();
var subjects=['Select Subject', 'Maths', 'History', 'Computer Science'];
var secondSelect = '<select name="whatever">';
for (var i=0; i<subjects.length; i++)
{
if (firstValue!=subjects[i])
{
secondSelect += '<option value="' + subjects[i] + '">' + subjects[i] + '</option>';
}
}
secondSelect += '</select>';
document.getElementById('secondSelectDiv').innerHTML= secondSelect;
});
有很多方法可以做到这一点。要使用上述方法，请创建第一个下拉列表或选择。在它旁边创建一个id为“secondSelectDiv”的空div。您不需要在页面加载时显示第二个选择，因为您不知道值应该是什么。在更改第一个选择时，创建第二个选择，省略第一个选项的值。一旦选择了HTML，就把它放在空div中。这有一个额外的好处，如果你只是改变第一个选择，第二个将自动更新...不需要减号按钮。如果要创建节点，还可以使用createElement执行相同的过程。在对象比较时要注意区分大小写。主题值必须在第一个选择和第二个选择/下拉列表中完全匹配。
$('#firstSelect' ).change(function(){
var firstValue=$('#firstSelect').val();
var subjects=['Select Subject', 'Maths', 'History', 'Computer Science'];
var secondSelect = '<select name="whatever">';
for (var i=0; i<subjects.length; i++)
{
if (firstValue!=subjects[i])
{
secondSelect += '<option value="' + subjects[i] + '">' + subjects[i] + '</option>';
}
}
secondSelect += '</select>';
document.getElementById('secondSelectDiv').innerHTML= secondSelect;
});#firstSelect, #secondSelectDiv{
display: inline-block;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="firstSelect">
<option value="Select Subject">Select Subject</option>
<option value="Maths">Maths</option>
<option value="History">History</option>
<option value="Computer Science">Computer Science</option>
</select>
<div id="secondSelectDiv">
</div>