根据 jquery 中的第一个下拉列表禁用下拉列表

Question

任何人都可以给我一个如何禁用下拉列表的例子吗？我想要的是当用户选择 Coaches and Mentoring 或 Others 时，第二个和第三个下拉列表将禁用。感谢您的帮助。

 <tr>
  <td>Action</td>
  <td><select name = "TTID1" id="TTID1" style="width:250px" onchange="otherAction(this.value)">
  <option value="O"></option>
     <option value="600">Classroom Training</option>
    <option value="601">Coaches and Mentoring by IM</option>
    <option value="602">On Job Training</option>
  <option value="9999">Others</option>
  </select></td>
  
  <td>Proposed Training in ILSAS</td>
  <td><select name = "trainGroup1" id="trainGroup1" style="width:250px" onchange="otherIlsas(this.value)">
  <option value="O"></option>
     <option value="700">Power Engineering & Energy Training</option>
    <option value="701">Management Training</option>
    <option value="702">IT & Corporate System Training</option>
  <option value="703">Business Operation Tools Certification</option>
  <option value="9999">Others</option>
  </select></td>
  
 </tr>
 <tr>
  <td>Course</td>
  <td><?php 
  
  $qry="SELECT trainID, trainText FROM tbltraininglist order by traintext asc";
  $result=mysql_query($qry);
  
  echo "<select name = 'trainID1' id='trainID1' style='width:250px' )'>";
  echo "<option value ='null'></option>";
  while ($row = mysql_fetch_array($result)) {
  
    
    ?>
   <option value="<?php echo $row['trainID'];  ?>"><?php echo $row['trainText']; ?> </option>
   <?php
    } 
  
  ?>
  </select></td>

Answer 1

<script type="text/javascript">
$(document).ready(function() {
     $('#TTID1').change(function() {
         if($(this).val() == "601" || $(this).val() == "9999")
         {
             $('#trainGroup1').prop('disabled', true);
         }
         else
         {
             $('#trainGroup1').prop('disabled', false);
         }
     });
 });
</script>

这是使用 onchange 事件的超级基本答案。让它更动态并调整它以正确重置您的 select 字段我将留给您自定义。 :)

Answer 2

试试下面这个简单的例子：

$('#TTID1').on('change', function(){
    
    if ( $(this).val() == 601 || $(this).val() == 9999 ) {
        
        $('#trainGroup1 option[value="700"], #trainGroup1 option[value="701"]').prop('disabled', true);
    } else {
        $('#trainGroup1').find('option').prop('disabled', false);
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<tr>
  <td>Action</td>
  <td><select name = "TTID1" id="TTID1" style="width:250px">
  <option value="O"></option>
     <option value="600">Classroom Training</option>
    <option value="601">Coaches and Mentoring by IM</option>
    <option value="602">On Job Training</option>
  <option value="9999">Others</option>
  </select></td>
  
  <td>Proposed Training in ILSAS</td>
  <td><select name = "trainGroup1" id="trainGroup1" style="width:250px">
  <option value="O"></option>
     <option value="700">Power Engineering & Energy Training</option>
    <option value="701">Management Training</option>
    <option value="702">IT & Corporate System Training</option>
  <option value="703">Business Operation Tools Certification</option>
  <option value="9999">Others</option>
  </select></td>

根据 jquery 中的第一个下拉列表禁用下拉列表

Disable dropdownlist based on first dropdownlist in jquery

php

mysql

jquery

drop-down-menu