Question

我有一个带有文本框和下拉菜单的表单。其中一个下拉菜单取决于另一个菜单的值，例如InventoryUsage取决于InventoryID。

中的值

到目前为止，我已经使用PHP完成了整个站点，因为我不知道JavaScript，虽然我发现了一个JavaScript函数可以获得在InventoryID中输入的值，但我不能在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>

Answer 1

要填充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']，然后查询你的数据库并返回将在上面填充的下拉选项（数组）......

编辑：

如果您确定此索引与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>

Answer 2

选项1：如果没有JavaScript，最好的选择是在第一个dropdwon列表中添加onchange，并在选择值时提交表单。由于表单不完整，并且只传递了下拉值和之前的元素，因此您可以设置条件来查询数据库，根据第一个下拉列表获取值并使用这些选项重新加载表单。如果做得好，这个解决方案没有错，但说实话，我更愿意用Ajax做这些事情，因此下面的选项2。

选项2：Learn some JavaScript和use Ajax（在系统中使用其他人的脚本时要小心）

编辑：也许不是从头开始编写Ajax代码，而是使用jQuery来完成大部分工作。如果要进行Web开发，学习jQuery非常有用

提交并生成动态PHP表单

2 个答案: