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.