Javascript预选选择选项不显示隐藏值_Javascript_Php

Javascript预选选择选项不显示隐藏值

javascript php

Javascript预选选择选项不显示隐藏值,javascript,php,Javascript,Php,我有这个javascript和从数据库获取的数据。问题是，当select选项已经从数据库中获取其值时，隐藏值不会显示。我必须绕过这个选项，然后显示隐藏的值。如果从“选择”选项中预先选择了隐藏值，如何显示隐藏值 <?php include('../includes/dbconnection.php'); ?> <html> <head> <script language="javascript"> function show(s

我有这个javascript和从数据库获取的数据。问题是，当select选项已经从数据库中获取其值时，隐藏值不会显示。我必须绕过这个选项，然后显示隐藏的值。如果从“选择”选项中预先选择了隐藏值，如何显示隐藏值

<?php 
include('../includes/dbconnection.php');
?>
<html>
<head>
<script language="javascript">
function show(select){
       if(select.value=='YA'){
        document.getElementById('hidden').style.display = "inline-block";;
       } else{
        document.getElementById('hidden').style.display = "none";
       }
    }
</script>
</head>
<body>
<div class="form-group">
<?php
$sql_update = mysqli_query($con,"Select * FROM abms_dkk AS dkk Where dkk.id = '30'");
while($row=mysqli_fetch_array($sql_update)){
$option = $row['tick']; 
?>  
<label style="font-size: 13px;"> Select answer</label><br>
<select name="tick" class="form-control" onchange="show(this)">
<option value="YA" <?php if($option=="YA") echo 'selected="selected"'; ?> >YA</option>
<option value="TIADA" <?php if($option=="TIADA") echo 'selected="selected"'; ?> >TIADA</option>
</select>
<br>
<?php } ?>
</div>      
<a id="hidden" style="display:none;"  href="add_comp.php" class="btn btn-success">Add</a>                               
</body>
</html>

在页面加载时调用show函数

function show(select){
   if(select.value=='YA'){
    document.getElementById('hidden').style.display = "inline-block";;
   } else{
    document.getElementById('hidden').style.display = "none";
   }
}

show(document.getElementById('selectId'));

然后为select下拉列表提供一个id：

我想我可能会想做这样的事情：

<?php 
    include('../includes/dbconnection.php');
?>
<html>
    <head>
        <script>
            /*
                Register an external event handler - the js code can then be included
                in a separate file if needed - from a cdn perhaps.
                
            */
            document.addEventListener('DOMContentLoaded',function(){
                const oSelect=document.querySelector('select[name="tick"]');
                const oHref=document.querySelector('a[id="hidden"]');
                
                const show=function(e){
                    oHref.style.display=e.target.value=='YA' ? 'inline-block' : 'none';
                };
                
                //register `onchange` event handler
                oSelect.addEventListener('change',show);
                
                // show or hide hidden element immediately on load
                oHref.style.display=oSelect.value=='YA' ? 'inline-block' : 'none';
            });
        </script>
        <!--
            Rather than inline styles it is generally preferred to
            use CSS...
        -->
        <style>
            #hidden{display:none;}
            .form-group label{font-size: 13px;}
        </style>
    </head>
    <body>
        <div class='form-group'>
            <label>Select answer</label>
            <br />
            <select name='tick' class='form-control'>
            <?php
                /*
                    Just to clean up the code use PHP to generate the options
                    rather than the inline echo statements used before.
                */
                $sql = mysqli_query( $con, 'select * from `abms_dkk` where `id` = 30' );
                
                while( $row=mysqli_fetch_array( $sql ) ){
                    $option = $row['tick'];
                    
                    printf('
                        <option value="YA"%s>YA
                        <option value="TIADA"%s>TIADA',
                        
                        $option=='YA' ? ' selected' : '',
                        $option=='TIADA' ? ' selected' : ''
                    );
                }
            ?>
            </select>
            <br />
        </div>
        <a id='hidden' href='add_comp.php' class='btn btn-success'>Add</a>
    </body>
</html>

我会遵循这一点，但什么也没有发生。不过，我还是要绕过这个选项，然后显示隐藏值。SQL查询需要多少结果？上面的代码可能会生成多个选择菜单，这些菜单调用相同的javascript函数，但只针对单个HTML元素ahidden-正确吗？只有一个结果，如果value选项已经是“TIADA”，那么我选择“YA”，显示隐藏值没有问题。问题是当已经选择的'YA'没有显示隐藏值时，我必须重新选择'TIADA'，然后'YA'将显示隐藏值。可能是因为我的javascript在某个地方出错了。

<?php 
    include('../includes/dbconnection.php');
?>
<html>
    <head>
        <script>
            /*
                Register an external event handler - the js code can then be included
                in a separate file if needed - from a cdn perhaps.
                
            */
            document.addEventListener('DOMContentLoaded',function(){
                const oSelect=document.querySelector('select[name="tick"]');
                const oHref=document.querySelector('a[id="hidden"]');
                
                const show=function(e){
                    oHref.style.display=e.target.value=='YA' ? 'inline-block' : 'none';
                };
                
                //register `onchange` event handler
                oSelect.addEventListener('change',show);
                
                // show or hide hidden element immediately on load
                oHref.style.display=oSelect.value=='YA' ? 'inline-block' : 'none';
            });
        </script>
        <!--
            Rather than inline styles it is generally preferred to
            use CSS...
        -->
        <style>
            #hidden{display:none;}
            .form-group label{font-size: 13px;}
        </style>
    </head>
    <body>
        <div class='form-group'>
            <label>Select answer</label>
            <br />
            <select name='tick' class='form-control'>
            <?php
                /*
                    Just to clean up the code use PHP to generate the options
                    rather than the inline echo statements used before.
                */
                $sql = mysqli_query( $con, 'select * from `abms_dkk` where `id` = 30' );
                
                while( $row=mysqli_fetch_array( $sql ) ){
                    $option = $row['tick'];
                    
                    printf('
                        <option value="YA"%s>YA
                        <option value="TIADA"%s>TIADA',
                        
                        $option=='YA' ? ' selected' : '',
                        $option=='TIADA' ? ' selected' : ''
                    );
                }
            ?>
            </select>
            <br />
        </div>
        <a id='hidden' href='add_comp.php' class='btn btn-success'>Add</a>
    </body>
</html>