javascript - YII2 依赖字段

Question

我有 DropDownList:

• 日历
• 最后一天
• 文本输入

我需要:

• 如果用户选择“日历”，则会出现日历小部件
• 如果“文本输入”，则会出现文本输入
• 如果选择“最后一天”，则不会显示任何内容

我在网上找到了很多选项，但它们使用 AJAX，不幸的是，我无法使其在我的情况下工作。

我认为可以用 JavaScript 来解决。

这是我的 PHP:

<?php 
    $js = 'function Go(){ alert("ok!");}';   
    $this->registerJs($js, yii\web\View::POS_READY);   
?>

<?php echo $form->field($model, 'condition')->dropDownList($conditionList,
[
    'id' => 'condition',
    'class' => 'dependent-input',
    'onchange' => 'Go()',
]
);
?>

Answer 1

您可以使用 jQuery 来完成日历和文本输入小部件的显示和隐藏。

您编译的 HTML 可能如下所示:

<select class="hide-and-show" name="show-and-hide">
  <option selected disabled>Choose one</option>
  <option value="calendar">Calendar</option>
  <option value="text-input">Text Input</option>
  <option value="last-day">Last Day</option>
</select>

<div class="calendar hideable">CALENDAR GOES HERE</div>
<div class="text-input hideable">TEXT INPUT GOES HERE</div>

隐藏.hideable元素直到它们被选择是通过简单的CSS完成的:

.hideable {
  display: none;
}

一点 JavaScript + jQuery 就可以处理小部件的隐藏和显示切换，如下所示:

var closerClass = "last-day";

$(".hide-and-show").change(function() {
  var selectValue = $(this).val();

  if (selectValue === closerClass) {
    $(".hideable").hide();
  } else {
    var classname = "." + selectValue;
    $(classname).show();
  }
});

我创建了一个 Codepen example来演示。