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

Question

Here I've a drop-down and when user changes this drop-down, I want to show only specific table rows eg if Patient Type=Inpatient then JQuery will show only those records .The table rows are dynamically generated by php code. Please suggest me the way i'm new in JQuery. My drop-down is:

<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>

The PHP code:

 <table class="draw_table" id="datawtable" border="1" width="100%" cellspacing="0" cellpadding="0"> <tr> <th> Patient_name </th> <th> Patient Type </th> <th> Payment Type </th> <th> Date </th> <th>Amount</th> </tr> <?php $query="SELECT doctor.doctor_name,inovoice.patient_name,inovoice.patient_type,inovoice.payment_type,inovoice.inovoice_date,inovoice.inovoice_amount from doctor,inovoice,prescription where doctor.doctor_name=prescription.doctor_name and inovoice.patient_name=prescription.patient_name and doctor.doctor_name='$_SESSION[doctor_nm]' and inovoice.inovoice_date between '$_SESSION[from_dt]' and '$_SESSION[to_dt]' $sortingCode "; $result=mysql_query($query); while($row=mysql_fetch_array($result)) { $newdate=date("d/m/Y", strtotime($row['inovoice_date'])); ?> <tr> <td><?php echo $row['patient_name'];?></td> <td id="<?php echo $row['patient_type'];?>"><?php echo $row['patient_type'];?></td> <td id="<?php echo $row['payment_type'];?>"><?php echo $row['payment_type'];?></td> <td><?php echo $newdate;?></td> <td><?php echo $row['inovoice_amount'];?></td> </tr> <?php } ?> 

JQuery code:

$( document ).ready(function() {
    $('#patient_type').change(function(){
       if($(this).val() == "InPatient")
       {
           alert("hiiiii");
           //show InPatient 
       }
    })
});

Answer 1

First of all you should't use id, because it is possible that there are rows with the same id. An id should always be unique. The second thing is if you want to show/hide the rules you should use a identifier on rule ( tr ) level. If you are using jQuery you can use a data tag, for example:

 <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>

In jQuery you would get something like the code below:

$( 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');
                }

           });
    })
});

Answer 2

您需要从选择中找到所选选项，而不是它的值。

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