我有一个带有文本框和下拉菜单的表单。下拉菜单中的一个取决于另一个的值,例如InventoryUsage
取决于InventoryID
中的值。
到目前为止,尽管我发现一个JavaScript函数可以获取在InventoryID
中输入的值,但是由于我不了解JavaScript,所以我已经使用PHP完成了整个站点,但是由于PHP是服务器端,因此无法在PHP中使用该值。
我需要做的是根据第一个下拉菜单更改第二个下拉菜单选项。然后像往常一样提交数据。
编辑:
我使用了ob_start并包含了tpl页面,并将所有变量发送到了先前从数据库中提取的变量。所有变量都具有相同的索引,这意味着InventoryID ['0'] = ID3456对应于InventoryUsage ['0'] = 60。因此,当InventoryID为ID3456时,我想显示位于InventoryUsage ['0']的数字。我希望这为问题增加了一些背景。
该索引由我的代码片段中的php变量$ i确定。 $ i将被更改以匹配InventoryID字段的索引。假设InventoryUsage的值为20,那么我要显示1到20。
下面的代码片段:
<label>TypeOfSurgery</label> <input type="text" name="TypeOfSurgery" size="35" value="" />
<label>CauseOfSurgery</label> <input type="text" name="CauseOfSurgery" size="35" value="" />
<label>AnaesthesiaUsage</label> <input type="text" name="AnaesthesiaUsage" size="35" value="" />
<label>SurgeryOutcome </label> <input type="text" name="SurgeryOutcome" size="35" value="" />
<label>RecoveryTime</label> <input type="text" name="RecoveryTime" size="35" value="" />
<label>Stages </label> <input type="text" name="Stages" size="35" value="" />
<label>EmployeeName </label> <p>
<select name="EmployeeName">
<option value=""></option>
<?php
for($i=0;!empty($EmployeeName[$i]);$i++)
echo '<option value="">'.$EmployeeName[$i].'</option>';
?>
</select><p>
<label>Cost</label> <input type="text" name="Cost" size="35" value="" />
<label>InventoryID</label> <p>
<select name="InventoryID">
<option value=""></option>
<?php
for($i=0;!empty($InventoryID[$i]);$i++)
echo '<option value="">'.$InventoryID[$i].'</option>';
?>
</select><p>
<label>InventoryUsage </label> <p>
<select name="InventoryUsage">
<option value=""></option>
<script type="text/javascript">
var model= document.getElementById('InventoryUsage');
</script>
<?php
//if inventory in
for($i=0;!empty($InventoryUsage[$i]);$i++)
echo '<option value="">'.$InventoryUsage[$i].'</option>';
?>
</select><p>
最佳答案
为了填充InventoryUsage
下拉列表,您需要使用JavaScript。
您可以将onChange
事件用于下拉菜单InventoryID
,然后通过Ajax获取相应的值。
$('#InventoryID').change(function () {
var value =$(this).val(); // selected InventoryID option
//get InventoryUsage values
$.ajax({
method: "POST",
url: "myfile.php",
data: { data: value },
success: function(data){
// Populate new dropdown $("#InventoryUsage")
// this is an example without knowing what is the returned data
var Newoptions = [];
for (var i = 0; i < data.length; i++) {
Newoptions.push('<option value="',
data[i].someValue, '">',
data[i].someName, '</option>');
}
$("#InventoryUsage").html(Newoptions .join(''));
}
});
});
});
然后在您的PHP文件中需要处理
$_POST['data']
,然后查询数据库并返回将在上方填充的下拉选项(Arrays)。编辑:
如果您确定此索引与Inventory_Usage相匹配,并且先前已填充InventoryUsage下拉列表,则
您可以尝试使用更改和加载事件中InventoryID下拉列表的索引来选择InventoryUsage选项...
尝试添加此功能到您选择:
<select name="InventoryID" onChange="set_inventory_usage()"></select>
然后将此脚本添加到页面的HEAD部分。
<head>
<script type="text/javascript">
function set_inventory_usage(){
// Change to getElementById if it is the ID not the name
var Inventory_ID = document.getElementsByName('InventoryID')[0];
var Inventory_Usage = document.getElementsByName('InventoryUsage')[0];
// returns the index of the selected option in the InventoryID dropdown
var InventorySelected = Inventory_ID.selectedIndex ;
// Sets the Usage dropdown to the same index as the Inventory selected option
Inventory_Usage.selectedIndex = InventorySelected ;
}
window.onload = set_inventory_usage ;
</script>
</head>