如何隐藏和显示另一个选择选项栏的选择选项


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()  
        }
     })
})