当HTML下拉列表选择一个选项时,需要隐藏div

时间:2012-11-04 15:50:16

标签: javascript jquery html

目前,我有一个客户输入工作数据的页面。可以选择说明他们的客户是否同意工作单数据:

<div id="modalwindow">
    <div class="leftcolumn">
        <?php 
            echo $this->Form->create('Jobsheet', array(
                'class' => 'form-horizontal',
                'id' => 'addquickJobsheet'
            ));

            echo $this->Form->input('jobnum', array(
                'type' => 'text',
                'lable' => 'Job ID',
                'class' => 'span5',
                'placeholder' => 'Enter the job ID here'
            ));
            echo $this->Form->input('jobdate', array(
                'type' => 'text',
                'label' => 'Date',
                'class' => 'span5',
                'placeholder' => 'YYYY/MM/DD'
            ));
            echo $this->Form->input('siteaddress', array(
                'type' => 'hidden',
                'value' => $sites['Siteaddress']['id']
            ));
            echo $this->Form->input('bins', array(
                'label' => 'Bins',
                'class' => 'span5',
                'placeholder' => 'Enter the number of bins here'
            ));
            echo $this->Form->input('company', array(
                'value' => $companyid,
                'type' => 'hidden',
                'label' => 'Company',
                'class' => 'span5'
            ));
            echo $this->Form->input('driverid', array(
                'options' => $driverselect,
                'empty' => 'Select Driver',
                'label' => 'Driver',
                'class' => 'span5'
            ));
            echo $this->Form->input('vehicleid', array(
                'options' => $vehicleselect,
                'empty' => 'Select Vehicle',
                'label' => 'Vehicle',
                'class' => 'span5'
            ));
            echo $this->Form->input('contract', array(
                'value' => $contractid,
                'type' => 'hidden',
                'label' => 'Contract',
                'class' => 'span5'
            ));
        ?>
    </div>
    <div class="rightcolumn">
        <?php
            echo $this->Form->input('skipsize', array(
                'options' => $skipsizes,
                'empty' => 'Select Skip Size',
                'label' => 'Skip Size',
                'class' => 'span5'
            ));
            $ao = array('1' => 'Yes', '0' => 'No');
            echo $this->Form->input('recweight', array(
                'label' => 'Weight Of Skip',
                'class' => 'span5',
                'placeholder' => 'Enter the weight here'
            ));
            $agval = array('1' => 'Yes', '0' => 'No');
            echo $this->Form->input('agreed', array(
                'label' => 'Agreed?',
                'options' => $agval,
                'class' => 'span5',
                'value' => '1'
            ));
        ?>
        <div id="agreedby">
        <?php
            echo $this->Form->input('agreedby', array(
                'label' => 'Agreed By',
                'class' => 'span5',
                'placeholder' => 'Enter who agreed this job sheet here'
            ));
        ?>
        </div>
        <?php
            echo $this->Form->input('deleted', array(
                'type' => 'hidden',
                'value' => '0'
            ));
            echo $this->Form->submit('Next', array(
                'class' => 'btn btn-primary'
            ));
            echo $this->Form->end();
        ?>
    </div>
</div>

目前,如果工作单未达成一致,我有Javscript应该隐藏“已接受”字段:

<script type="text/javascript">
$(document).ready(function(){
    $("#JobsheetAgreed").change(function() {
        ($(this).val() == "0") ({
            $("#agreedby").hide();  
        });
        ($(this).val() == "1") ({
            $("#agreedby").show();
        });
    });
});
</script> 

但这似乎没有做任何事情。有没有人有任何想法?

3 个答案:

答案 0 :(得分:1)

我不确定HTML中#JobsheetAgreed的位置,是否存在?您也可以尝试检查HTML和ID。

无论如何,我认为如果选择器正确,这段代码应该有用。

$(document).ready(function(){
    $("#JobsheetAgreed").change(function() {
    var agrdby = $(this).val();
       if (agrdby == "0") {
       $("#agreedby").hide();
       }
       else {
       $("#agreedby").show();
       } 
    });
});

答案 1 :(得分:0)

试试这个:

$('#agreedby, [name="agreedby"]').hide();

而不是

$("#agreedby").hide();

可能是因为您使用的PHP框架不包含表单字段的ID属性。

答案 2 :(得分:0)

我没有发现你在任何输入元素上定义id“JobsheetAgreed”,如果你不是只是跳过你代码的某些片段,那很可能就是原因。

假设这是部分:

echo $this->Form->input('agreed', array(
            'label' => 'Agreed?',
            'options' => $agval,
            'class' => 'span5',
            'value' => '1'
        ));

只要我能阅读你的代码就必须有'id' => 'JobsheetAgreed'