如果在下拉列表中选择了特定值，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 选择选定的选项

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

Answer 2

使用 jQuery，您希望 $(this).val() 检索输入的值。

查看此相关帖子jquery function val() is not equivalent to "$(this).value="?