Question

我在Yii2上使用了动态表单wbraganca，但是我需要添加一个小函数来在选择一个droplist选项时隐藏字段，并以每种新的动态表单进行操作。目前，我可以做到，但只能采用第一种动态方式。

_Form

<? = $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();
       }

  });

Answer 1

您只需要确定import time time.sleep(100)#in seconds somefunction()的位置，该位置保存在运行时添加的动态表单输入，则应使用事件委托，它将自动处理新添加的输入。

要检测相关字段，您可以使用正则表达式提取当前行的模型和索引，该模型和索引以.dynamicform-wrapper的格式附加到动态输入中，这表示是否正在加载问题模型动态形式，则输入modelname-index的ID为question_title，依此类推。

使用表达式

question-1-question_title

以匹配模型名称，并将其附加到您要隐藏的相关输入中。

在视图顶部添加以下代码

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

Answer 2

选择器的范围太广。 $('#add-options')向整个DOM询问ID ='add-options'的元素。

使用ID选择器（＃）只会返回一个对象，因为ID应当是唯一的。要选择多个对象，您需要使用其他形式的选择器，例如类名选择器（.some_class_name）。

对于下面的示例，我只需要真正了解已更改的问题，然后将其与容器div一起使用即可控制其余DOM选择发生的上下文。

您应将question和add-options字段包装在div包装器中，并为包装器分配一个已知的类question-container，如下所示：

<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>

注意-我还向每个问题选择框添加了class="question"。这样可以更轻松地整理问题。

然后，您可以添加此javascript，它将适用于页面上的所有问题（虽然很冗长，但为了清楚起见）：

// 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
    }
}

我从臀部写了这段代码，尚未经过测试。

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

2 个答案: