Question

此处我有一个下拉列表，当用户更改此下拉列表时，我只想显示特定的表行，例如如果Patient Type = Inpatient，那么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代码：

＆＃13;

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

＆＃13;

JQuery代码：

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

Answer 1

首先，你不应该使用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>

在jQuery中你会得到类似下面的代码：

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

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

2 个答案: