Question

我有DropDownList：

日历
最后一天
文字输入

我需要：

如果用户选择＆＃34;日历＆＃34;，则会显示日历小部件
if＆＃34; Text input＆＃34;，出现文本输入
如果＆＃34;最后一天＆＃34;被选中，没有出现

我在网上找到了很多选项，但是他们使用了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来演示。

YII2依赖字段

1 个答案: