0

我有一个产品订单的动态表格。我根据 company(select2) 和使用onchange产品的产品设置价格dropDownList。公司位于（易于参考）之外的基本表单上，dynamicform但产品是dynamicform. 我的代码适用于第一个项目，但我无法设置后续项目，因为我无法弄清楚如何解决添加的动态表单项目的项目#。

动态表单循环：

 <?php foreach ($modelsOrderItem as $o => $modelOrderItem): ?>
    <div class="item panel panel-default"><!-- widgetBody -->

        <div class="clearfix"></div>
        <div class="panel-body">
            <?php
                // necessary for update action.
                if (! $modelOrderItem->isNewRecord) {
                    echo Html::activeHiddenInput($modelOrderItem, "[{$o}]id");
                }
            ?>

            <div class="pull-right">
                <button type="button" class="add-item btn btn-success btn-xs"><i class="glyphicon glyphicon-plus"></i></button>
                <button type="button" class="remove-item btn btn-danger btn-xs"><i class="glyphicon glyphicon-minus"></i></button>
            </div>
            <div class="col-md-5">

                <?= $form->field($modelOrderItem, "[{$o}]idProduct")->
                    dropDownList
                    (
                        ArrayHelper::map(Product::find()->all(), 'id','ProductCodeWithName'),
                        ['prompt' => 'Select a Product','style'=>'width:400px' ,

                        'onchange' => '$.post( "index.php?r=pricelist/pricelist&idProduct='.'"+$(this).val()+"'.'&idCompany='.'"+$("#order-idcompany").val(),
                            function(data)
                            {
                                    $( "#orderitem-0-itemprice" ).val(data);
                            });']

                    )->label(false);

                ?>

            </div>

            <div class="col-md-3" >
                    <?= $form->field($modelOrderItem, "[{$o}]itemQuantity")->textInput(['style'=>'width:150px'])->label(false) ?> 
            </div>
            <div class="col-md-2">
                    <?= $form->field($modelOrderItem, "[{$o}]itemPrice")->textInput(['style'=>'width:200px'])->label(false) ?>
            </div>

        </div><!-- .row -->
    </div>
</div>
<?php endforeach; ?>

我现在已经删除了 onchange 函数并添加了允许我控制要更改的表单元素的 Javascript，但是我无法弄清楚如何使用动态添加的元素来做到这一点。我已包含脚本以查找添加的价格元素的更改，但该脚本未激活。所以它适用于零（0）元素，但不会响应 orderitem1 等。这是我更新的代码和 Javascript。

                <div class="container-items"><!-- widgetContainer -->
            <?php foreach ($modelsOrderItem as $o => $modelOrderItem):?>
                <div class="item panel panel-default"><!-- widgetBody -->
                    <div class="clearfix"></div>
                    <div class="panel-body">
                        <?php
                            // necessary for update action.
                            if (! $modelOrderItem->isNewRecord)
                            {
                                echo Html::activeHiddenInput($modelOrderItem, "[{$o}]id");
                            }
                        ?>
                        <div class="form-group kv-fieldset-inline">
                            <div class="col-sm-4">

                                <?= $form->field($modelOrderItem, "[{$o}]idProduct")->dropDownList
                                    (
                                        ArrayHelper::map(Product::find()->orderBy('productCode')->all(), 'id','ProductCodeWithName'),
                                        ['prompt' => 'Select a Product','style'=>'width:360px' ,]

                                    )->label(false);
                                ?>
                            </div>

                            <div class="col-sm-2" >
                                    <?= $form->field($modelOrderItem, "[{$o}]itemQuantity")->textInput(['style'=>'width:100px','padding'=>'100px'])->label(false) ?> 
                            </div>

                            <div class="col-sm-2" >
                                    <?= $form->field($modelOrderItem, "[{$o}]quantityType")->DropdownList(['Cartons'=>'Cartons','Bags'=>'Bags','Kilograms'=>'Kilograms',
                                            'Tubs'=>'Tubs', 'Pieces' => 'Pieces'],['style'=>'width:150px'])->label(false) ?> 
                            </div>

                            <div class="col-sm-2">
                                    <?= $form->field($modelOrderItem, "[{$o}]itemPrice")->textInput(['style'=>'width:200px'])->label(false) ?>
                            </div>

                            <div class="pull-right">
                                <button type="button" class="add-item btn btn-success btn-xs"><i class="glyphicon glyphicon-plus"></i></button>
                                <button type="button" class="remove-item btn btn-danger btn-xs"><i class="glyphicon glyphicon-minus"></i></button>
                            </div>
                        </div>
                    </div><!-- .row -->
                </div>
            </div>
            <?php endforeach; ?>
        </div>
        <?php DynamicFormWidget::end(); ?>
    </div>

Javascript：

 <?php
    $script = "$('#orderitem-0-idproduct').change(function()
        {
            var idProduct = $(this).val();
            $.get( 'index.php?r=pricelist/getpricelist&idProduct',{ idProduct:idProduct, idCompany:$model->idCompany },
            function(data)
            {
                    $('#orderitem-0-itemprice').val(data);
            });
        });
        $('#orderitem-1-idproduct').change(function()
        {
            var idProduct1 = $(this).val(data);
            alert();
            $.get( 'index.php?r=pricelist/getpricelist&idProduct',{ idProduct:idProduct1, idCompany:$model->idCompany },
            function(data)
            {
                    $('#orderitem-1-itemprice').val(data);
            });
        });";
    $this->registerJs($script);
?>
4

1 回答 1

0

我能够使用 Javascript 找出被点击的元素。这避免了能够在尚未启动的动态元素上运行代码的问题。

    <?php $js = <<<JS

    $('body').change(function(e)
    {
        var element = '#'+$(e.target).attr('id');
        var field = element.substring(element.length - number_of_chars_in_your_fieldname, element.length);  //stripping the string to identify the field you are looking 

        if(field === "field_you_are_looking_for")  //element usually looks like #formID-row-field
        {
            var dropdownID = $(element).val();
            if (element.length === 22)              //single digit row numbers
            {
                var row = element.substring(11,12);  //extract the current row number
            } else                                   //row numbers higher than 9
            {
                var row = element.substring(11,13); 
            }
            //Do whatever you need to do

            $('#formID-'+row+'-field_you_want_to_change').val(data);  //set the field to change on current row
        }
    });
JS;

    $this->registerJs($js);

?>
于 2017-06-16T03:15:19.577 回答