Question

我想知道的是，我想使用jQuery在dropDownlist上更改textField或dropDownList。

<?php echo $form->dropDownList($model,'name',array('prompt'=>'Select')); ?>
                                OR
<?php echo $form->textField($model,'name',array('size'=>60,'maxlength'=>100)); ?>

我有另一个下拉列表，

<?php echo $form->dropDownList($model,'type', array('car'=>'Car', 'train'=>'Train', 'cruise'=>'Cruise', 'airline'=>'Airline'), array('prompt'=>'Select Type')); ?>

根据类型下拉列表的更改功能，我只想显示名称文本字段或名称下拉列表，其字段相同，但我不是知道这样做。我的jquery就是这样：

$(document).ready(function() {
     $('#Transport_type').change(function() {
        var trantype = $('#Transport_type').val();       
        if(trantype == 'car' || trantype == 'train'){
          //Here I wanna show dropdownlist             
        }else if(trantype == 'cruise' || trantype == 'airline'){
          //Here I wanna show textfield
        }
      });
   });

如果有人可以提供帮助，那就太好了。谢谢！

Answer 1

<?php echo $form->dropDownList($model,'name',array('prompt'=>'Select'),array('style'=>'display:none;')); ?>
                                OR
<?php echo $form->textField($model,'name',array('size'=>60,'maxlength'=>100,style'=>'display:none;')); ?>

当我改变这个

<?php echo $form->dropDownList($model,'type', array('car'=>'Car', 'train'=>'Train', 'cruise'=>'Cruise', 'airline'=>'Airline'), array('prompt'=>'Select Type')); ?>

然后你写的是正确的并且会起作用

$(document).ready(function() {
     $('#Transport_type').change(function() {
        var trantype = $(this).val();       
        if(trantype == 'car' || trantype == 'train'){
          $('#dropdownid').show(); 
        }else if(trantype == 'cruise' || trantype == 'airline'){
          $('#textboxid').show();
        }
      });
   });

Answer 2

我会做类似的事情，只需要进行非常小的修改就可以隐藏不应该显示的下拉列表。

$(document).ready(function() {
     $('#Transport_type').change(function() {
        var trantype = $(this).val();       
        if(trantype == 'car' || trantype == 'train'){
          $('#dropdownid').show(); 
          $('#textboxid').hide();  
        }else if(trantype == 'cruise' || trantype == 'airline'){
          $('#textboxid').show();
          $('#dropdownid').hide()
        }
      });
   });

如果使用模型，您还可以替换自动生成的ID。

$(document).ready(function() {
     $("#<?php echo CHtml::activeId($model, "type"); ?>").change(function() {
        var trantype = $(this).val();       
        if(trantype == 'car' || trantype == 'train'){
          $('#dropdownid').show(); 
          $('#textboxid').hide();  
        }else if(trantype == 'cruise' || trantype == 'airline'){
          $('#textboxid').show();
          $('#dropdownid').hide()
        }
      });
   });

通过这样做，您可以保护代码，以便更改框架上可能会更改自动生成表单ID的方法。

如果Ids是相同的，你应该使用JQuery追加并销毁和销毁/创建en元素来改变类型以解决这个问题。

http://api.jquery.com/prepend/

Answer 3

如果您不禁用非活动的Yii表单字段，则无法POST数据。

你可以通过使用jQuery添加一个东西来轻松完成。也就是说，对于非活动的yii表单字段使用“DISABLED”属性。那么就不会考虑那个。此外，首先，在表单加载时，禁用将在“类型更改”下拉列表中显示的表单字段。

并且，您还必须从模型中的名称字段中删除“REQUIRED”，并且可以在验证Yii表单之前使用javascript / jquery进行操作。

HTML：

<div id="dropdownId">
<?php echo $form->dropDownList($model,'name',array('prompt'=>'Select')); ?>
</div>

<div style="display:none;" id="textboxId">
<?php echo $form->textField($model,'name',array('size'=>60,'maxlength'=>100,'disabled'=>'disabled')); ?>
</div> 

<?php echo $form->error($model, 'name'); ?>

Jquery的：

$('#Transport_type').change(function() {
    var trantype = $('#Transport_type').val();       
    if(trantype == 'car' || trantype == 'train'){
      //Here I wanna show dropdownlist       
      $("#dropdownId").show();
      $("#textboxId").hide();
      $("#textboxId input").prop("disabled",true);
      $("#dropdownId select").prop("disabled",false);
    }else if(trantype == 'cruise' || trantype == 'airline'){
      //Here I wanna show textfield
      $("#textboxId").show();
      $("#dropdownId").hide();
      $("#dropdownId select").prop("disabled",true);
      $("#textboxId input").prop("disabled",false);
    }
  });

我希望，这有帮助。感谢

Answer 4

<script>
jQuery(document).ready(function() {
     $('#Transport_type').change(function() {
        var trantype = $('#Transport_type').val();       
        if(trantype == 'car' || trantype == 'train'){
           $('input#Transport_name').show();          
           $('select#Transport_name').hide();          
        }else if(trantype == 'cruise' || trantype == 'airline'){
            $('input#Transport_name').hide();          
           $('select#Transport_name').show();  
        }
      });
   });
</script>

试试这个。

想要改变yii中的字段

4 个答案: