我的一个网页上有三个选择框。我设置它的两个依赖于第一个的值，就像当选择a的值是1然后其他两个将被启用而我做了但问题出在我按下提交之后因为之后我无法点击另外两个，即使第一个s的值仍然选择为1.这是我的选择框：
<form action="<?php echo htmlentities($_SERVER['PHP_SELF']);?>">
<label>Department</label>
<select class="field" id="cmbdept" name="dept" onchange="handleSelect()">
<option value=""></option>
<?php
try{
$query1 = $con->prepare("SELECT * FROM departments");
$query1->execute();
} catch(PDOException $e){
echo $e->getMessage();
exit();
}
while($r = $query1->fetch()) {
extract($r);
echo <<<EOL
<option value='$Deptname'>$Deptname</option>
EOL;
}
?>
</select>
<script type="text/javascript">
document.getElementById('cmbdept').value = "<?php echo $_GET['dept'];?>";
</script>
<label><strong>Section</strong></label>
<select id="cmbsection" name="section" disabled="disabled">
<option value=""></option>
<?php
try {
$query2 = $con->prepare("SELECT * FROM section");
$query2->execute();
} catch(PDOException $e) {
echo $e->getMessage();
exit();
}
while($s = $query2->fetch()) {
extract($s);
echo "<option value='$sectionName'>$sectionName</option>";
}
?>
</select>
<script type="text/javascript">
document.getElementById('cmbsection').value = "<?php echo $_GET['section'];?>";
</script>
<label><strong>Line</strong> </label>
<select id="cmbline" name="line" disabled="disabled">
<option value=""></option>
<?php
try{
$query3 = $con->prepare("SELECT * FROM line");
$query3->execute();
} catch(PDOException $e){
echo $e->getMessage();
exit();
}
while($t = $query3->fetch()) {
extract($t);
echo "<option value='$lineName'>$lineName</option>";
}
?>
</select>
<script type="text/javascript">
document.getElementById('cmbline').value = "<?php echo $_GET['line'];?>";
</script>
<label for="from">From</label>
<input type="text" id="from" name="from">
<script type="text/javascript">
document.getElementById('from').value = "<?php echo $_GET['from'];?>";
</script>
<label for="to">To</label>
<input type="text" id="to" name="to">
<script type="text/javascript">
document.getElementById('to').value = "<?php echo $_GET['to'];?>";
</script>
<br/>
<input type="submit" name="submit" value="Submit">
</form>
这是我使用的javascript：
function handleSelect() {
var item1 = document.getElementById("cmbdept");
var item2 = document.getElementById("cmbsection");
if(item1.value == 'SEWING') {
document.getElementById('cmbsection').disabled = false;
document.getElementById('cmbline').disabled = false;
} else {
document.getElementById('cmbsection').disabled = true;
document.getElementById('cmbline').disabled = true;
}
}
答案 0 :(得分：1)
看看这是否是你想要做的。这里的关键是限制脚本中的重复。如果你一遍又一遍地做事，比如同一个数据库调用序列，那就是你应该创建一个代替它的函数（或类）的信号：
<强> /functions/form.php
<?php
// Since you are doing the same query sequence over and over,
// just do it once and make it reusable
function fetch_query($con,$sql,$keyname = false)
{
try{
$query = $con->prepare($sql);
$query->execute();
} catch(PDOException $e){
// Let's not announce issues to users. You reveal the error
// only if the user is logged in as an administrator otherwise
// You should be able to just return an empty array so the
// web app keeps on going (unless you really want to exit, you can)
//echo $e->getMessage();
return array();
}
while($r = $query->fetch()) {
$result[] = (isset($r[$keyname]))? $r[$keyname] : $r;
}
return (!empty($result))? $result : array();
}
// Create a get_departments function
function get_departments($con)
{
return fetch_query($con,"SELECT * FROM `departments`","Deptname");
}
// Create a get_section function
function get_section($con)
{
return fetch_query($con,"SELECT * FROM `section`","sectionName");
}
// Create a get_line function
function get_line($con)
{
return fetch_query($con,"SELECT * FROM `line`","lineName");
}
// Create a sanitizer function that checks for set array keys
function to_page($array = false,$key = false)
{
if(!is_array($array))
return false;
return (isset($array[$key]))? htmlspecialchars($array[$key],ENT_QUOTES) : "";
}
/form.php（或此页面的任何名称）
<?php
// include the php functions above
include_once("functions/form.php");
?>
<!-- INCLUDE JQUERY LIBRARIES IF NOT ALREADY SET -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<form action="<?php echo htmlentities($_SERVER['PHP_SELF']);?>">
<label>Department</label>
<select class="field" id="cmbdept" name="dept">
<option value="">Select</option>
<?php foreach(get_departments($con) as $Deptname) {
?> <option value="<?php echo $Deptname; ?>"><?php echo $Deptname; ?></option>
<?php }
?>
</select>
<label><strong>Section</strong></label>
<select id="cmbsection" name="section" disabled="disabled">
<option value="">Select</option>
<?php foreach(get_section($con) as $sectionName) {
?> <option value="<?php echo $sectionName; ?>"><?php echo $sectionName; ?></option>
<?php }
?>
</select>
<label><strong>Line</strong> </label>
<select id="cmbline" name="line" disabled="disabled">
<option value="">Select</option>
<?php foreach(get_line($con) as $lineName) {
?> <option value="<?php echo $lineName; ?>"><?php echo $lineName; ?></option>
<?php }
?>
</select>
<label for="from">From</label>
<input type="text" id="from" name="from" value="<?php echo to_page($_GET,"from");?>" />
<label for="to">To</label>
<input type="text" id="to" name="to" value="<?php echo to_page($_GET,"to");?>" />
<br/>
<input type="submit" name="submit" value="Submit">
</form>
<script type="text/javascript">
$(document).ready(function() {
<?php
// Fetch the values of the get
$set['line'] = to_page($_GET,"line");
$set['cmbdept'] = to_page($_GET,"dept");
$set['section'] = to_page($_GET,"section");
// Remove empty
$set = array_filter($set);
// If there are any left, loop through them
if(!empty($set)) {
foreach($set as $idName => $value) {
?>$('#<?php echo $idName; ?>').val('<?php echo $value; ?>');
<?php }
}
?>
// Run on load
handleSelect();
// Run on change
$("#cmbdept").change(function() {
handleSelect();
});
});
function handleSelect()
{
var item2 = $("#cmbsection");
var item1 = $("#cmbdept");
if(item1.val() == 'SEWING') {
item2.prop("disabled",false);
$("#cmbline").prop("disabled",false);
} else {
item2.prop("disabled",true);
$("#cmbline").prop("disabled",true);
}
}
</script>