如果在下拉列表中选择了特定值，jQuery不显示字段

Question

我正在使用cakePHP并试图学习如何使用jQuery来显示输入字段，如果第一个下拉列表中的特定值被选中。我的目标是显示两个隐藏字段：cpu和ram，如果在type_id下拉列表中选择了第二个选项，其值为2.我还确保将其包含在页面的头部。但是当我选择选项2或任何其他的时候，什么也没有发生，并且这些字段保持隐藏。任何人都可以看到问题可能是什么？

<div class="products form"> 
<script > 
    $('#ProductTypeId').change(function(){ 
     if($(this).value == '2'){ // or this.value == '2' 
     $('#ProductCpu').show(); 
     $('#ProductRam').show(); 
     } 
    }); 
</script> 
<?php echo $this->Form->create('Product');?> 
    <fieldset> 
     <legend><?php echo __('Add Device'); ?></legend> 
    <?php 
     echo $this->Form->input('type_id'); 
     echo $this->Form->input('category_id', array('label' => 'Vendor')); 
     echo $this->Form->input('subcategory_id', array('label' => 'Model')); 
     echo $this->Form->input('location', array('label' => 'Location')); 
     //echo $this->Form->input('sku', array('label' => 'Asset Tag')); 
     echo $this->Form->input('mac', array('label' => 'MAC/AssetTag')); 
     echo $this->Form->input('description', array('label' => 'Notes')); 
     //echo $this->Form->input('name', array('value' => data['type_id'] , 'type' => 'hidden')); 
     echo $this->Form->input('cpu', array('type' => 'hidden')); 
     echo $this->Form->input('ram', array('type' => 'hidden')); 
     // echo $this->Form->input('Tag'); 
    ?> 
    </fieldset> 
<?php echo $this->Form->submit(__('Submit'));?> 
<?php echo $this->Html->link(__('Cancel'), array('action' => 'index'));?> 
<?php echo $this->Form->end();?> 
</div> 

渲染HTML

 <div class="products form"> 
     <script> 
      $('#ProductTypeId').change(function(){ 
       if($(this).val() == '2'){ // or this.value == '2' 
       $('#ProductCpu').show(); 
       $('#ProductRam').show(); 
       } 
      }); 
     </script> 
     <form accept-charset="utf-8" method="post" id="ProductAddForm" action="/products/add"><div style="display:none;"><input type="hidden" value="POST" name="_method"></div> <fieldset> 
       <legend>Add Device</legend> 
      <div class="input select"><label for="ProductTypeId">Type</label><select id="ProductTypeId" name="data[Product][type_id]" style="min-width: 70px;"> 
     <option value="5">AP</option> 
     <option value="4">Gateway</option> 
     <option value="3">Modem</option> 
     <option value="2">Laptop</option> 
     <option value="1">Router</option> 
     </select></div><div class="input select"><label for="ProductCategoryId">Vendor</label><select id="ProductCategoryId" name="data[Product][category_id]" style="min-width: 70px;"> 
     <option value="11">Apple</option> 
     <option value="1">Arris</option> 
     <option value="13">BelAir</option> 
     <option value="3">Cisco</option> 
     </select></div><div class="input select"><label for="ProductSubcategoryId">Model</label><select id="ProductSubcategoryId" name="data[Product][subcategory_id]" style="min-width: 70px;"> 
     <option value="30">BELAIR20E-11</option> 
     <option value="20">CG3000D</option> 
     <option value="28">CG3000DCR</option> 
     <option value="1">CM820A</option> 
     </select></div> 
    <div class="input text"><label for="ProductLocation">Location</label><input type="text" id="ProductLocation" maxlength="100" name="data[Product][location]"></div> 
    <div class="input text"><label for="ProductMac">MAC/AssetTag</label><input type="text" id="ProductMac" maxlength="100" name="data[Product][mac]"></div> 
    <div class="input textarea"><label for="ProductDescription">Notes</label><textarea id="ProductDescription" rows="6" cols="30" name="data[Product][description]"></textarea></div> 
<input type="hidden" id="ProductCpu" name="data[Product][cpu]"> 
<input type="hidden" id="ProductRam" name="data[Product][ram]"> </fieldset> 
<div class="submit"><input type="submit" value="Submit"></div><a href="/products">Cancel</a></form></div> 

Answer 1

使用jQuery，你要$（本）.VAL（）来检索输入值。

退房此相关的职位jquery function val() is not equivalent to "$(this).value="?

Answer 2

你必须选择与jQuery

$('#ProductTypeId').change(function() { 
    var selectedItem = $(this).children('option:selected'); 
    if (selectedItem.val() == '2') { // or $(this).attr('value') 
     $('#ProductCpu').show(); 
     $('#ProductRam').show(); 
    } 
});