Javascript 如何在下拉列表更改时动态隐藏表行？

这里我有一个下拉列表，当用户更改此下拉列表时，我只想显示特定的表行，例如，如果患者类型=住院患者，那么JQuery将只显示这些记录。表行由php代码动态生成。请告诉我我是JQuery新手的方式。 我的下拉列表是：

<tr>
    <td style="text-align:left"><label>Patient Type:</label></td>
    <td>
    <select id="patient_type">
        <option>Select patient type</option>
        <option>InPatient</option>
        <option>OutPatient</option>
    </select>
    </td>
</tr>

PHP代码：

病人姓名 患者类型 支付类型 日期 数量

---

您需要从“选择”菜单中找到所选选项，而不是它的值

---

$patient_type选项：选中。文本

首先，您不应该使用id，因为可能存在具有相同id的行。id应始终是唯一的。第二件事是，如果要显示/隐藏规则，应该在规则tr级别使用标识符。如果使用jQuery，则可以使用数据标记，例如：

 <tr data-patientType="<?php echo $row['patient_type'];?>">
    <td><?php echo $row['patient_name'];?></td>
    <td><?php echo row['patient_type'];?></td>
    <td><?php echo $row['payment_type'];?></td>
    <td><?php echo $newdate;?></td>
    <td><?php echo $row['inovoice_amount'];?></td>
</tr>

---

发布呈现的html。不是php代码不是这样的，如果选项确实有value属性，它将使用selected option text检查此链接@S.Poles你能给我一些建议吗

$( document ).ready(function() {
    $('#patient_type').change(function(){

           var selectedValue = $("#patient_type option:selected").text();

           $('table tr').each(function(){

                if($(this).data('patientType') == selectedValue)
                {
                    $(this).css('display', 'block');
                }
                else
                {
                    $(this).css('display', 'hidden');
                }

           });
    })
});