这是下拉选择包类别，例如。我选择unifi它将隐藏所有除了unifi包列表..但当我选择streamyx所选的unifi包列表仍然没有重置意味着我将提交unifi和streamyx
<form onsubmit="return validate()" name="registration" method="post"
action="" class="form-horizontal form-label-left">
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name"> Package Category<label style="color:red;">*</label> :
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<select name="PACKAGE_CATEGORY" class="form-control" onmousedown="this.value='';" onchange="jsFunction(this.value);" required id="streamSelect">
<option disabled selected value> -- select an option -- </option>
<option value="UNIFI">Unifi</option>
<option value="STREAMYX">Streamyx</option>
<option id="myDIV" value="WEBE">Webe</option>
<option id="myDIVA" value="LEASE LINE">Lease Line(DOME)</option>
</select>
</div>
</div>
<div class="form-group" id="beb">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name"> Package List :
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<select name="PACKAGE_ID_UNIFI" class="form-control" onmousedown="this.value='';" onchange="jsFunction(this.value);">
<option disabled selected value> -- select an option -- </option>
<?php
$result = mysqli_query($conn,"select * from unifi ORDER BY PACKAGE_NAME ASC");
while ($row=mysqli_fetch_assoc($result))
{?>
<option value="<?php echo $row["no"]; ?>"> <?php echo $row["PACKAGE_NAME"]; ?></option>
<?php
}
?>
</select>
</div>
</div>
<div class="form-group" id="bob">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name"> Package List :
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<select name="PACKAGE_ID_STREAMYX" class="form-control" onmousedown="this.value='';" onchange="jsFunction(this.value);" >
<option disabled selected value> -- select an option -- </option>
<?php
$result = mysqli_query($conn,"select * from streamyx ORDER BY PACKAGE_NAME ASC");
while($row=mysqli_fetch_assoc($result))
{?>
<option value="<?php echo $row["PACKAGE_NAME"]; ?>"> <?php echo $row["PACKAGE_NAME"]; ?></option>
<?php
}
?>
</select>
</div>
</div>
<div class="form-group" id="kok">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name"> Package List :
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<select name="PACKAGE_ID_WEBE" class="form-control" onmousedown="this.value='';" onchange="jsFunction(this.value);" >
<option disabled selected value> -- select an option -- </option>
<?php
$result = mysqli_query($conn,"select * from webe ORDER BY PACKAGE_NAME ASC");
while($row=mysqli_fetch_assoc($result))
{?>
<option value="<?php echo $row["PACKAGE_NAME"]; ?>"> <?php echo $row["PACKAGE_NAME"]; ?></option>
<?php
}
?>
</select>
</div>
</div>
<div class="form-group" id="joj">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name"> Package List :
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<select name="PACKAGE_ID_DOME" class="form-control" onmousedown="this.value='';" onchange="jsFunction(this.value);" >
<option disabled selected value> -- select an option -- </option>
<?php
$result = mysqli_query($conn,"select * from dome ORDER BY PACKAGE_NAME ASC");
while($row=mysqli_fetch_assoc($result))
{?>
<option value="<?php echo $row["PACKAGE_NAME"]; ?>"> <?php echo $row["PACKAGE_NAME"]; ?></option>
<?php
}
?>
</select>
</div>
</div>
<button type="submit" class="btn btn-success" name="subtn">Submit</button>
</form>
这是我的javascript来隐藏某个ID
<script>
function jsFunction(value)
{
var a = document.getElementById('beb');
if ((value) == 'UNIFI')
{
a.style.display = '';
}
else if((value) == 'STREAMYX')
{
a.style.display = 'none';
a.value = '';
}
else if((value) == 'WEBE')
{
a.style.display = 'none';
a.value = '';
}
else if((value) == 'LEASE LINE')
{
a.style.display = 'none';
a.value = '';
}
var a = document.getElementById('bob');
if ((value) == 'UNIFI')
{
a.style.display = 'none';
a.value = '';
}
else if((value) == 'STREAMYX')
{
a.style.display = '';
}
else if((value) == 'WEBE')
{
a.style.display = 'none';
a.value = '';
}
else if((value) == 'LEASE LINE')
{
a.style.display = 'none';
a.value = '';
}
var a = document.getElementById('kok');
if ((value) == 'UNIFI')
{
a.style.display = 'none';
}
else if((value) == 'STREAMYX')
{
a.style.display = 'none';
}
else if((value) == 'WEBE')
{
a.style.display = '';
}
else if((value) == 'LEASE LINE')
{
a.style.display = 'none';
}
var a = document.getElementById('joj');
if ((value) == 'UNIFI')
{
a.style.display = 'none';
}
else if((value) == 'STREAMYX')
{
a.style.display = 'none';
}
else if((value) == 'WEBE')
{
a.style.display = 'none';
}
else if((value) == 'LEASE LINE')
{
a.style.display = '';
}
}
</script>
答案 0 :(得分：1)
参考https://www.w3schools.com/php/php_ajax_database.asp
<html>
<head>
<script>
function showdata(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","getdata.php?q="+str,true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<form>
<select name="PACKAGE_CATEGORY" class="form-control" onmousedown="this.value='';" onchange="showdata(this.value) required id="streamSelect">
<option disabled selected value> -- select an option -- </option>
<option value="UNIFI">Unifi</option>
<option value="STREAMYX">Streamyx</option>
<option id="myDIV" value="WEBE">Webe</option>
<option id="myDIVA" value="LEASE LINE">Lease Line(DOME)</option>
</select>
</form>
<br>
<div id="txtHint"></div>
</body>
</html>
访问getdata.php
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<?php
$q = intval($_GET['q']);
$con = mysqli_connect('localhost','peter','abc123','my_db');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"ajax_demo");
$sql="select * from unifi WHERE PACKAGE_CATEGORY = '".$q."' ";
$result = mysqli_query($con,$sql);
echo"<select name="PACKAGE_ID_UNIFI" class="form-control" onmousedown="this.value='';" onchange="jsFunction(this.value);">"
while($row = mysqli_fetch_array($result)) {
echo"<option value="<?php echo $row["no"]; ?>"> <?php echo $row["PACKAGE_NAME"]; ?></option>"
}
mysqli_close($con);
?>
</body>
</html>
希望这有效
答案 1 :(得分：1)
这个答案符合您的要求......说实话，这不是一个好方法。
<div class="col-md-6 col-sm-6 col-xs-12">
<select name="PACKAGE_CATEGORY" id="PACKAGE_CATEGORY" class="form-control" onmousedown="this.value='';" onchange="jsFunction(this.value);" required id="streamSelect">
<option disabled selected value> -- select an option -- </option>
<option value="UNIFI">Unifi</option>
<option value="STREAMYX">Streamyx</option>
<option id="myDIV" value="WEBE">Webe</option>
<option id="myDIVA" value="LEASE LINE">Lease Line(DOME)</option>
</select>
</div>
<div class="col-md-6 col-sm-6 col-xs-12" id="UNIFI" style="display: none" >
<select name="PACKAGE_ID_UNIFI" class="form-control" onmousedown="this.value='';" onchange="jsFunction(this.value);">
<option disabled selected value> -- select an option -- </option>
<?php
$result = mysqli_query($conn,"select * from unifi WHERE PACKAGE_CATEGORY ="UNIFI" ORDER BY PACKAGE_NAME ASC");
while ($row=mysqli_fetch_assoc($result))
{?>
<option value="<?php echo $row["no"]; ?>"> <?php echo $row["PACKAGE_NAME"]; ?></option>
<?php
}
?>
</select>
</div>
<div class="col-md-6 col-sm-6 col-xs-12" id="STREAMYX" style="display: none" >
<select name="PACKAGE_ID_UNIFI" class="form-control" onmousedown="this.value='';" onchange="jsFunction(this.value);">
<option disabled selected value> -- select an option -- </option>
<?php
$result = mysqli_query($conn,"select * from unifi WHERE PACKAGE_CATEGORY ="STREAMYX" ORDER BY PACKAGE_NAME ASC");
while ($row=mysqli_fetch_assoc($result))
{?>
<option value="<?php echo $row["no"]; ?>"> <?php echo $row["PACKAGE_NAME"]; ?></option>
<?php
}
?>
</select>
</div>
<div class="col-md-6 col-sm-6 col-xs-12" id="WEBE" style="display: none" >
<select name="PACKAGE_ID_UNIFI" class="form-control" onmousedown="this.value='';" onchange="jsFunction(this.value);">
<option disabled selected value> -- select an option -- </option>
<?php
$result = mysqli_query($conn,"select * from unifi WHERE PACKAGE_CATEGORY ="WEBE" ORDER BY PACKAGE_NAME ASC");
while ($row=mysqli_fetch_assoc($result))
{?>
<option value="<?php echo $row["no"]; ?>"> <?php echo $row["PACKAGE_NAME"]; ?></option>
<?php
}
?>
</select>
</div>
<div class="col-md-6 col-sm-6 col-xs-12" id="LEASE" style="display: none">
<select name="PACKAGE_ID_UNIFI" class="form-control" onmousedown="this.value='';" onchange="jsFunction(this.value);">
<option disabled selected value> -- select an option -- </option>
<?php
$result = mysqli_query($conn,"select * from unifi WHERE PACKAGE_CATEGORY ="LEASE LINE" ORDER BY PACKAGE_NAME ASC");
while ($row=mysqli_fetch_assoc($result))
{?>
<option value="<?php echo $row["no"]; ?>"> <?php echo $row["PACKAGE_NAME"]; ?></option>
<?php
}
?>
</select>
</div>
在您的js文件
上$(document).ready(function () {
$("select#PACKAGE_CATEGORY").change(function(){
var selectedtype = $("#PACKAGE_CATEGORY option:selected").val();
if(selectedtype=="UNIFI"){
$("#UNIFI").show();
$("#STREAMYX").hide();
$("#WEBE").hide();
$("#LEASE").hide();
}
else
{
$("#UNIFI").hide();
}
if(selectedtype=="STREAMYX")
{
$("#STREAMYX").show();
$("#UNIFI").hide();
$("#WEBE").hide();
$("#LEASE").hide();
}
else
{
$("#STREAMYX").hide();
}
if(selectedtype=="WEBE")
{
$("#STREAMYX").hide();
$("#UNIFI").hide();
$("#WEBE").show();
$("#LEASE").hide();
}
else
{
$("#WEBE").hide();
}
if(selectedtype=="LEASE")
{
$("#STREAMYX").hide();
$("#UNIFI").hide();
$("#WEBE").hide();
$("#LEASE").show();
}
else
{
$("#LEASE").hide();
}
});
});