php - 具有从属下拉列表的动态表单

Question

嗨，开发人员，我正在构建一个应用程序表单，用户可以在其中将数据输入到不同的字段中。应用程序的一部分是来自 https://github.com/wbraganca/yii2-dynamicform 的动态表单.现在在动态表单中，我有一个依赖下拉列表，但是当我单击 [+] 符号时，依赖下拉列表更改第一行而不是第二行的数据。

这是我的代码。

在我的 Controller 中

 public function actionLists($name)
    {
         $countHs= Hs::find()
                        ->where(['hscode'=> $name])
                        ->count();
         $Hs  = Hs::find()
                 ->where(['hscode'=> $name])
                 ->all();
         if($countHs > 0)
         { 
             foreach ($Hs as $H)
             {
                 echo "<option value='".$H->hsproduct."'> ".$H->hsproduct."</option>";


             }
         }else{
                 echo "<option> - </option>";
             }


    }

和我的表格

<div class="col-sm-6" style="width: 135px">
     <?= $form->field($modelsItems, "[{$i}]hscode")->dropDownList(
                                    ArrayHelper::map(Hs::find()->all(),'hscode','hsproduct'),                      

                                        [


                                            'prompt'=>'',

                                         'onchange'=>

                                        '$.get( "'.Url::toRoute('/hs/lists').'", { name: $(this).val() })
         .done(function( data ) { $( "#'.Html::getInputId($modelsItems, "[{$i}]hsproduct").'" ).html( data ); } );'

                                            ])->label('HS.Code'); 


                                ?>  

        </div>
    <div class="col-sm-6" style="width: 135px">
   <?= $form->field($modelsItems, "[{$i}]hsproduct")->dropDownList(
                                    ArrayHelper::map(Hs::find()->all(),'hsproduct','hsproduct'),
                                    [
                                     'prompt'=>'',
                                    ])->label('HS.Product');
                                 ?>  
        </div>

我是新手，对不起我的英语

Answer 1

针对您的案例进行了更新。

我所做的是在 JS 文件 var i 中声明全局变量并分配 0。第一个事件触发后，我将变量 i 增加一个。现在它在内存中包含 1。下次它将取 1 并再次加 1。等等:

var i = 0;

$(document).on('change', 'select', function(e) {
    i++;
})

请注意，这只有在您在每一行中只选择一次并且您不会返回到特定行时才有效。如果您想做类似的事情，您应该获取元素 ID 的编号，解析为 float (而不是字符串)并将该编号用于您的事件脚本。

parseFloat($('#hs-0-hscode')[0].id.split('-')[1])

下面还有一个额外的解决方案(但不是根据您的)。以防万一。

---

使用 Inspect source 并查找输入字段的命名方式(名称或 ID)。比方说，我们有 name="hs-0-hscode"。这只是为了你的 jQuery:

$(document).on('change', 'select', function(e) {
    if ($(this)[0].id.indexOf('hscode') > 0) {
        // Now you can use Ajax to get a list of items you want to show.
        // Element itself can be reached: $(this).parent().parent().parent().children().eq(1);
        // For example:
        // var data = $.parseJSON(results);
        // $.each(data, function(key, value) {
        //    $('#client-company_size')
        //        .append($("<option></option>")
        //        .attr("value", key)
        //        .text(value)); 
        // });
    }
});