我有一個選擇選項2值(本地/導入)。每個值都有一個對應的表格,當選定的表格將顯示在頁面上時。我使用jQuery的更改,但它不工作,而是所有的表格都顯示在頁面中。請幫我解決我的代碼有什麼問題。謝謝。jquery更改不起作用
這裏是jQuery代碼:
<script>
$('#shiptype').change(function() {
$('#t1,#t2').hide();
var tableValue = $(this).val();
if (tableValue == 1) {
$('#t1').show();
} else if (tableValue == 2) {
$('#t2').show();
}
});
</script>
而這裏的HTML部分:
<form name='form1' method='post' autocomplete='on'>
<table id='tblselect' class=normal2 style='font-size:0.6em;'>
<tr><th align='right'>Shipment Type: </th>
<td><select name='shiptype' id="shiptype" onchange="">
<option value="0"> Please select... </option>
<option value="1"> LOCAL </option>
<option value="2"> IMPORT </option>
</select></td></tr>
</table>
<br>
<table id="t1" class=normal2 style='font-size:0.6em;'>
<tr><th align='right'>Shipment Type:</th>
<td><b><input type='text' name='ship' value='LOCAL' readonly /></b></td></tr>
<tr><th align='right'>Reference Number: </th>
<td><b><input type='text' name='ref_no' value="<?php echo $localrefnumb ?>" readonly /></b></td></tr>
<tr><th align='right'>Supplier: </th>
<td><select name='supplier'>
<option value=' '> Please select... </option>
<option value='Supplier 1'> Supplier 1 </option>
<option value='Supplier 2'> Supplier 2 </option>
<option value='Supplier 3'> Supplier 3 </option>
</select></td></tr>
<tr><th align='right'>Description: </th>
<td><input type='text' name='description' size='70' /></td></tr>
<tr><th align='right'>PO No: </th>
<td><input type='date' name='po_no' /></td></tr>
<tr><th align='right'>Invoice Number: </th>
<td><input type='text' name='inv_number' /></td></tr>
<tr><th align='right'>Receive Qty: </th>
<td><input type='text' name='r_qty'/></td></tr>
<tr><th align='right'>No. of Boxes/Packs: </th>
<td><input type='text' name='no_boxes'/></td>
<tr><th align='right'> </th>
<td></td></tr>
<tr><th align='right'> </th>
<td align='left'><input type='submit' name='local_btn' value='SAVE' style='font-size:2em;'> <input type='submit' name='local_cancel' value='CANCEL' style='font-size:2em;'></td></tr>
</table>
<table id="t2" class=normal2 style='font-size:0.6em;'>
<tr><th align='right'>Shipment Type:</th>
<td><b><input type='text' name='ship2' value='IMPORT' readonly /></b></td></tr>
<tr><th align='right'>Reference Number: </th>
<td><b><input type='text' name='ref_no2' value="<?php echo $importrefnumb ?>" readonly /></b></td></tr>
<tr><th align='right'>Supplier: </th>
<td><select name='supplier2'>
<option value=' '> Please select... </option>
<option value='Supplier1'> Supplier 1 </option>
<option value='Supplier2'> Supplier 2 </option>
<option value='Supplier3'> Supplier 3 </option>
</select></td></tr>
<tr><th align='right'>Description: </th>
<td><input type='text' name='description2' size='70' /></td></tr>
<tr><th align='right'>PO No: </th>
<td><input type='date' name='po_no2' /></td></tr>
<tr><th align='right'>Invoice Number: </th>
<td><input type='text' name='inv_number2' /></td></tr>
<tr><th align='right'>AWB(Airway Bill) No: </th>
<td><input type='text' name='awb_no'/></td></tr>
<tr><th align='right'>AWB(Airway Bill) No of Boxes/Packs: </th>
<td><input type='text' name='awb_no_boxes'/></td></tr>
<tr><th align='right'> </th>
<td></td></tr>
<tr><th align='right'> </th>
<td align='left'><input type='submit' name='import_add' value='SAVE' style='font-size:2em;'> <input type='submit' name='import_cancel' value='CANCEL' style='font-size:2em;'></td></tr>
</table>
</form>
在'ready'處理程序中包裝jQuery代碼或將腳本移動到主體的末尾。從'
@Kimlyn Tormes刪除'onchange =「」'原因是你沒有隱藏文件準備好或加載。 – divy3993
https://jsfiddle.net/arunpjohny/nxv95g1m/2/ –