我很想在下面找到解决这一挑战的方法。 我想要一种情况,当我选择医生选项时,它会隐藏专家列表,当我选择专家时,它会显示专家列表。 谢谢
<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()
}
})
})