html選擇啓用禁用屬性

Question

我的網頁中有三個選擇框。我把它的兩個設置爲依賴於第一個值的值，比如當select a的值是1時，那麼其他兩個將被啓用，但我做了，但問題出在我按下submit之後，因爲之後我無法點擊第一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; 
    } 
} 

Answer 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>