如何在使用ajax在下拉列表中选择选项时显示文本框

时间:2011-12-29 10:57:27

标签: ajax yii

这是下午使用..

    <?php echo $form->labelEx($model,'status'); ?>
            <?php echo $form->dropDownList($model,'status',
array('0' =>'In active', '1'=> 'Active'),
array( 'onChange' => 'javascript:description()' )); ?>

如何在动态选择非活动状态时显示文本框以供说明...

请为初学者推荐一些yii + ajax教程

3 个答案:

答案 0 :(得分:6)

你要做的事实上非常简单,而且,由于Yii的jQuery封装,你不必担心jquery代码。以下是参考:http://www.yiiframework.com/wiki/24/creating-a-dependent-dropdown#hh0无论如何,让我告诉你如何做到这一点。但在我有一个问题之前:这行代码:array( 'onChange' => 'javascript:description()' ),是你试图解决这个问题吗?或者它是否具有与此主题无关​​的其他功能?如果它是您尝试解决问题的一部分,那么只需将其删除即可。你不需要那个。正如我之前告诉过你的,你不需要担心实际的jquery代码,它很好地封装在Yii中。换句话说,如果它与这个主题无关,那么就把它放在原处。

现在,关于ajax更新。首先,我们需要一个div来显示文本框;我将使用description_id div。然后,在dropdownlist()中指定ajax请求,如下所示:

<?php echo $form->labelEx($model,'status'); ?>
<?php echo $form->dropDownList($model,'status',
array('0' =>'In active', '1'=> 'Active'),
array( 'onChange' => 'javascript:description()', 
       'ajax'=>array(
          'type'=>'POST',
          'url'=>CController::createUrl('YourController/actionWhichEchoesTheTextBox'),
          'update'=>'#description_id',
))); 
?>
<div id="description_id">
</div>

您可能会注意到,在ajax声明的'url'属性中,我们指定了在ajax请求触发时将调用的函数。在'update'属性中,我们指定了div,其中将显示调用url属性中指定的函数的结果。

最后,剩下要做的就是声明动作actionWhichEchoesTheTextBox()。它可以在任何控制器中声明,但如果它不在当前控制器中,则必须将其声明为静态方法,以便在此处访问它。所以为了避免任何问题,你应该在当前控制器中声明它,它看起来像这样:

    public function actionWhichEchoesTheTextBox()
   {
      if($_POST['ModelName']['status']===0)
         echo CHtml::textField("ModelName", 'description'/*attribute name*/) ; 
   }

就是这样。

答案 1 :(得分:3)

即使我们今天晚上也只做了同样的事情......

创建一个div,默认情况下是不可见的,当包含文本框和标签时,我们可以根据表单的正常命名设置其名称...

并且已经添加了描述函数onChange,在该函数中将div显示为块..

在模型中你必须包含该文本框字段的变量名称,如果它在模型中不存在....(我假设你可以从这里拿走它......)

<?php echo $form->labelEx($model,'status'); ?>
<?php echo $form->dropDownList($model,'status',
array('0' =>'In active', '1'=> 'Active'),
array( 'onChange' => 'javascript:description(this.selectedIndex)' )); 
?>
<div id="description_id" style="display:none;">
<laabel for="...">..
<textarea name="ModelName[description]">....
</div>
<script>
function description(id)
{
if(id==0)
document.getElementById("description_id").style.display="block";
}
</script>

答案 2 :(得分:0)

$_POST变量中没有创建动态字段的值。 即在div标签之间创建的字段。