2016-11-19 68 views
0

我的DropDownList:YII2相关字段

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

我需要:

  • 如果用户选择 “日历” ,日历小工具出现
  • 如果“输入文字”,在文本输入时,出现
  • 如果“最后一天”被选中,没有出现

我在网上找到了许多选择,但他们使用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()', 
] 
); 
?> 
+0

您已经表达了需求,但具体而言,您的问题是什么?你有没有试过编写JavaScript? jQuery听起来像一个不错的选择。有关编辑问题的帮助,请参阅“[如何提出一个好问题](http://stackoverflow.com/help/how-to-ask)”。 – jacefarm

+0

是的,我试过使用jQwery,但我无法去工作 – AstureS

+1

如果您发布了jQuery代码,它将帮助其他人与您协作寻找解决方案。 – jacefarm

回答

1

您可以使用jQuery来完成显示您的日历和文本输入小部件和隐藏。直到他们选择用简单的CSS实现

<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元素:

.hideable { 
    display: none; 
} 

而且一些JavaScript + jQuery的可以处理

编译的HTML可能是这个样子切换隐藏和显示小部件,如下所示:

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来演示。