Question

我有一个关于如何根据在另一个下拉列表中选择的值填充下拉列表的问题。

我正在使用MVC模式，当视图加载时，它已经为我带来了两个带有我需要的值的变量。什么是$ tipohardware和$ tiposoftware。

所以我不需要再次调用.php文件来获取数据，因为它已经加载了。

我的静态下拉列表是：

<select id="producto" class="form-control" required>
<option value="">Seleccionar..</option>
<option value="1">Hardware</option>
<option value="2">Software</option>
</select>

我希望根据下拉列表“producto”中选择的内容填充动态下拉列表：

<select id="tipoproducto" name="tipoproducto" class="form-control">

</select>

我已经有两个包含表格数据的变量“tipo_hardware”和“tipo_software”。什么是$ tipohardware和$ tiposoftware。

因此，例如，如果我在下拉列表中选择“硬件”选项，则第二个下拉列表应填充变量$ tipohardware的数据。

另一方面，如果我选择“软件”，则下拉列表应填充变量$ tiposoftware的值。

如果你需要，这是我的控制器。

<?php
namespace app\controllers;

use \app\models\Hardware;
use app\models\Software;
use app\models\TipoHardware;
use app\models\TipoSoftware;
use \Controller;
use \Response;

class IngresarProductoController extends Controller
{
    public function actionIndex()
    {
    $softwares = Software::all();
    $hardwares = Hardware::all();
    $tiposoftware = TipoSoftware::all();
    $tipohardware = TipoHardware::all();
    Response::render("ingresarProducto", ["hardwares" => $hardwares, 
    "softwares" => $softwares, "tipohardware" => $tipohardware, 
    "tiposoftware" => $tiposoftware]);
    }
}

我想我应该在javascript onchange函数中调用php代码，如：

$("#producto").on("change",function){
   <?php
   foreach($tipohardware as $tipohard) {
   ?>
      <option value="<?php echo $tipohard->idtipo_hardware  ?>"><?php echo 
       $tipohard->nombre_tipo_hardwarecol  ?></option>

   <?php
   }
   ?>
 }

});

但我不知道如何继续这样做，

感谢您的帮助！

Answer 1

您正在将前端脚本与后端脚本混合使用，后端无效。后端将在前端开始执行之前构建整个页面。 PHP创建DOM并在PHP将其吐出后操纵DOM。这就是你的jQuery无法工作/更新的原因。

例如，如果你这样做：

$('.button').on('click',function(){
    var whatever = <?php echo rand() ?>;
    alert('This value is'+whatever);
});

它将首先运行php，这样你最终会得到随机数：

$('.button').on('click',function(){
    var whatever = 3241231;
    alert('This value is'+whatever);
});

无论您多少次点击按钮元素，它都将始终显示3241231，直到您重新加载页面时PHP将在加载时运行rand()函数。

要使其实时加载，您需要创建一个ajax侦听器以从目标接收值，发送到后端PHP，然后当该后端页面响应时，将响应放回当前加载的页面，改变DOM。

一个简单的例子是：

<强>的index.php

<?php
# Create the back end to listen for your front end ajax
if(!empty($_POST['test'])) {
    # Do your code here to send back.
    $rand = rand();
    die('Ajax done! Here is a random number: '.$rand);
}
?>
<!-- CLICK ELEMENT -->
<div id="button">CLICK</div>
<!-- PLACEMENT ELEMENT -->
<div id="response"></div>

<script>
$(function(){
    // When you click the div
    $('#button').on('click',function(){
        // Fire the ajax to the same page (you may want to do a
        // different page in production). Note, I am referencing a new instance of
        // of index.php in the background and sending $_POST['test'] = true as noted
        // in the data section of the ajax below.
        $.ajax({
            'url': '/index.php',
            'type': 'post',
            // Send the data from the click or whatever
            'data': {
                'test':true
            },
            // If there are no server errors,
            'success': function(response){
                // place the phrase 'Ajax done! Here is a random number: 123124'
                // back into the placement div
                $('#response').text(response);
            }
        });
    });
});
</script>

在此示例中，随机数将更改div的每次单击。无论如何希望这个例子很有用。

根据从两个变量PHP中的另一个下拉列表中选择的内容填充下拉列表

1 个答案: