想要更改yii中的字段從

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

您將無法爲POST數據，如果你不關閉不活動的Yii表單字段。

您可以通過使用jQuery添加一件事來輕鬆完成此操作。也就是說，使用「DISABLED」屬性爲yii表單字段是無效的。那麼這不會考慮那個。此外，首先，當表單加載時，禁用將在類型更改下拉菜單中顯示的表單字段。

並且還u必須從名稱字段中刪除「REQUIRED」在模型中，並且可以由使用javascript/jquery的所述Yii的形式的驗證之前所需。

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> 

試試這個。