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

我有动态表单wbraganca在处理Yii2，但我需要添加一个小函数，在选择一个droplist选项时隐藏一个字段，并在每个新的动态表单中这样做。目前，我可以做到这一点，但只有在第一个动态的方式

_形式

---

选择器的范围太广。$'addoptions'是向整个DOM请求ID为'addoptions'的元素

使用ID选择器只会返回一个对象，因为ID应该是唯一的。要选择多个对象，您需要使用另一种形式的选择器，如类名选择器

在下面的例子中，我只需要知道发生了变化的问题，然后我将把它与容器div一起使用，以控制DOM选择其余部分发生的上下文

您应该在div包装器中包装问题并添加选项字段，并向包装器分配一个已知的类问题容器，如下所示：

<div class='question-container'>
    <select id="question-1" class="question">...</select>
    <input type="text" id="add-options" />
</div>
<div class='question-container'>
    <select id="question-2" class="question">...</select>
    <input type="text" id="add-options" />
</div>

---

我从hip编写了这段代码，它还没有经过测试。

您只需要将.dynamicform包装器作为目标，它保存您在运行时添加的动态表单输入，您应该使用事件委派，它将自动处理新添加的输入

要检测相关字段，您可以使用正则表达式提取当前行的模型和索引，该行以modelname索引的格式附加到动态输入中。这意味着，如果我有一个问题模型以动态形式加载，则输入问题标题将有一个id question-1-question\u标题，依此类推

使用表达式

/^([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);

---

添加了一个答案，看看它是否有助于您创建一个视图，并且您正在加载表单和表单opc视图？如果这是正确的，脚本应该可以工作如果您将它包括在创建视图的顶部HI，创建函数在controllerEvaluation中，而视图仅为_form和_form-opc，我想要得到的是模型的名称和当前行的索引，在本例中，它是_form-opc视图的dynamicform_内部。一旦我有了它们，我想将其添加到js中，以便每次选择“保持”选项时，这些选项都被隐藏。我不是说actionCreate，而是使用行加载的create.php视图文件，返回$this->render'create'，['model'=>$model，'modelQuestion'=>empty$modelQuestion？[新问题]：$modelQuestion，'modelsOpc'=>empty$modelsOpc？[[new Option]]：$modelsOpc]；此外，这是一个新问题。使用相同id和动态表单扩展的多个输入在技术上是错误的。OP不创建具有类似id的输入，您可以使用$this.val简单地获得下拉列表的值，并且您没有使用事件委派，因此这对动态表单不起作用ally添加了元素她使用的是选定的索引，而不是值，我试图将其保留在他的设计上下文中。此外，我引用了ID应该是唯一的这一事实。谢谢，这正是我所寻找的，现在我正在尝试在选择问题类型时隐藏或删除问题的选项，例如我有一个文件表格，其中我声明了问题，还有一个文件表格-opc，其中有选项，我想做的是，当选择问题类型时，justify不显示我要添加选项，我尝试了你给我的示例，但我不知道如何从文件表格-opc中获取模型名索引，你能指导我如何消除这些选项吗e选项？如果您在加载这两个视图的地方添加控制器操作和视图文件@MiguelAngelAyalaPajuelo，或者在主视图顶部添加脚本，其中包括_form和_frm-opcHi，modify和我在问题中包含的代码，@Muhammad，会更好

// Find all select boxes with the class 'question', and wire up the change event
$("select.question").change(function(){
    // Reference the current question select box to a variable for clarity.
    var question  = this;   

    // This retrieves the closest container with the class '.question-container'
    var container = $(question).closest('.question-container');  

    // Finds the add-options field inside the container. Note, our context is the container, not the entire DOM.
    var addOptions = container.find('#add-options');

    // Hide or show the add options based on the index that is selected.
    if (question.selectedIndex == 3) {
        addOptions.hide();
    } else { 
        addOptions
    }
}

/^([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);