根据jquery中的第一个下拉列表禁用下拉列表
Posted
技术标签:
【中文标题】根据jquery中的第一个下拉列表禁用下拉列表【英文标题】:Disable dropdownlist based on first dropdownlist in jquery 【发布时间】:2015-10-17 03:04:22 【问题描述】:谁能给我一个如何禁用下拉列表的示例?我想要的是当用户选择教练和指导或其他时,第二个和第三个下拉列表将被禁用。感谢您的帮助。
<tr>
<td>Action</td>
<td><select name = "TTID1" id="TTID1" style="width:250px" onchange="otherAction(this.value)">
<option value="O"></option>
<option value="600">Clas-s-room 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>
【问题讨论】:
【参考方案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 事件的超级基本答案。使其更具动态性并对其进行调整以正确重置您的选择字段,我将留给您自定义。 :)
【讨论】:
【参考方案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">Clas-s-room 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>
【讨论】:
它不起作用!我需要在 ILSAS 下拉列表中的 Proposed Training 中添加 onchange 吗? 你应该发布otherAction(this.value)
,所以我可以调整这个功能。还有一件事,在你的情况下,为了使这件事起作用,不需要放置 onchange
属性。看我的例子,我删除了onchange
函数。以上是关于根据jquery中的第一个下拉列表禁用下拉列表的主要内容,如果未能解决你的问题,请参考以下文章
根据 python plotly dash 中先前单选项目/下拉列表中的选择禁用下拉列表
根据 DJango/Ajax 中的第一个选定下拉菜单创建下拉选择