如何隐藏和显示另一个选择选项栏的选择选项
how to hide and show select options for another select option bar
我很想在下面找到解决这一挑战的方法。 我想要一种情况,当我选择医生选项时,它会隐藏专家列表,当我选择专家时,它会显示专家列表。 谢谢
<tr><td colspan=2 ><strong>Doctor Locator</strong></td></tr>
<tr><td>
<?php
$doc = 'Doctors';
$spel = 'Specialist';
$medic = array($doc, $spel);
sort ($medic);
echo "<select>";
foreach ($medic as $m)
{
echo "<option value='"$m'">$m</option>";
}
echo "</select> <br/> ";
?>
<select name="txt_specialize" style="width: 400px; height: 25px">
<?php
$specialist = array('Surgeon','Neurosurgeon','','Neurologist','Occupational Medicine Physician','Ophthalmologist',
'Oral and Maxillofacial Surgeon','Pathologist','Psychiatrist','Podiatrist','Nephrologist','Otolaryngologist',
'Internal Medicine Physician','Gastroenterologist','Emergency Physicians','Hermatologist','Dermatologist',
'Anesthesiologist','Immunologist','Orthopaedic Surgeon','Radiation Onconlogist','Gynaecologist','Dentist',
'Optician','Cardiologist','Pediatrician','Urologist','Diagnostic Radiologist','Pulmonary Medicine Physician',
'Rheumatologist','Plastic Surgeon');
sort ($specialist);
foreach ($specialist as $s)
{
echo "<option value='"$s'">$s</option>";
}
echo "</select>"
?>
</td></tr>
<tr><td>
你可以用jQuery轻松做到这一点。如果给第一个选择的 id "type",则可以添加以下 jQuery:
$(document).ready(function(){
$("select[name='txt_specialize']").hide();
$("select#type").change(function(){
if($(this).val() == 'Doctor')
{
$("select[name='txt_specialize']").hide();
}
else
$("select[name='txt_specialize']").show();
});
});
将change
事件附加到第一个选择框。
http://api.jquery.com/change/
在回调中,根据您的口味更新选择框内容。
将数据属性添加到txt_specialize $s并完成编写脚本,如下所示:选择医生
$('#doctor').change(function(e){
var doc = $('#doctor').val();
$("#specialist option").each(
function(){
if ($(this).attr('data-doctor')==doc){
$(this).show()
}else{
$(this).hide()
}
})
})
相关文章:
- 使用此选项选择父类内部的类
- 更新:仅根据单选按钮和所选选项选择特定项目
- 使用PHP通过HTML表单选项选择器过滤MYSQL结果
- ng-单击在IE中不起作用的选项选择Angularjs
- 从选项选择中删除值
- On为<选项>选择等效项
- 用户界面先前选择的选项选择更改
- 使用ng重复或ng选项和删除空白选项选择长方体角度
- 在HTML5、CSS、JavaScript中添加选项选择器,类似于移动应用程序中的选项设置
- 输入:选中,选项:选择选择器
- 根据使用angularjs从下拉菜单中选择的选项选择适当的复选框
- 如何根据 html 中的选项/选择重定向用户(单击按钮后)
- 使用ng选项选择中的ng选项进行过滤器下拉列表
- 如何设置选项选择的值
- 如何搜索长下拉选项/选择列表
- jQuery - 根据下拉选项选择列出结果
- 从选项选择单击时打开 2 个 URL
- 在 Angular JS 中为 ng 选项选择默认值
- 下拉选项选择的操作
- 通过单击单选按钮清除所有选项选择条目