时间戳

首页 > 解决方案 > 隐藏和显示输入 - 动态表单 Yii2

javascript - 隐藏和显示输入 - 动态表单 Yii2

问题描述

我有在 Yii2 上工作的动态表单 wbraganca，但是我需要添加一个小功能来在选择下拉列表选项时隐藏一个字段，并在每个新的动态表单中执行此操作。目前我可以做到，但只能以第一种动态方式。

_形式

<? = $form->field ( $modelQuestion , "[{$indexQuestion}]question" )->dropDownList (
        ArrayHelper::map ( QuestType::find ()->all () , 'id' , 'description' ) , [
    'prompt' => '-- Select Question --'
] );
?>
<?= $form->field ( $modelQuestion , "[{$indexQuestion}]add-options" )->label ( false )->textInput ( [ 'maxlength' => true ] ) ?>

JS

$("#questions-0-question").change(function(){

    var op=document.getElementById("questions-0-question");

    if (op.selectedIndex == 3) {
            $('#add-options').hide();
        }else {
            $('#add-options').show();
       }

  });

标签： javascriptyii2

解决方案

您只需要定位.dynamicform-wrapper保存您在运行时添加的动态表单输入的对象，您应该使用事件委托，它会自动处理新添加的输入。

要检测相关字段，您可以使用正则表达式提取当前行的模型和索引，这些模型和索引以均值的格式附加到动态输入中，modelname-index如果我有一个问题模型以动态形式加载，那么输入question_title将具有一个id question-1-question_title，然后以此类推。

使用表达式

/^([a-zA-Z]+)\-([0-9]+)/g

匹配模型名称并将其附加到您尝试隐藏的相关输入。

在您的视图顶部添加以下代码

$JS = <<< JS

        $(".dynamicform_wrapper").on("change","select",function(){
                var id=$(this).attr("id");
                var optionsInput=id.match(/^([a-zA-Z]+)\-([0-9]+)/g)[0]+'-add-options';

                if ($(this).val()== 3) {
                    $('#'+optionsInput).hide();
                }else {
                    $('#'+optionsInput).show();
               }

        });

JS;

$this->registerJs($JS, yii\web\View::POS_READY);

推荐阅读