在php中使用mysql枚举和javascript显示和隐藏元素？

I am trying to simply show and hide an element depending on the value of an ENUM in mysql database.

I am using the javascript and PHP but it seems like the javascript within PHP does not or cannot select element given as the element is always on display!

here is my php code:

if ($sizeSelect != '1') {

echo '<script type="text/javascript">';
echo 'document.getElementById("sizeSelect").style.display = "block"';
echo '</script>';
}else{
echo '<script type="text/javascript">';
echo 'document.getElementById("sizeSelect").style.display = "none"';
echo '</script>';
}

and this is my HTML element:

<select id="sizeSelect" name="sizeSelect">
            <option>Small</option>
            <option>Large</option>
            </select>

is there anything that I'm missing?

any help would be appreciated.

Thanks

P.S. I have made sure that I am connected to mysql database and get the ENUM value properly so the mysql connection is not an issue here.

okay, I just did a test within my html file and placed the following code at the top of the page and still didn't work but when I put the same code at the bottom of the page, it did work and changed the element's display to none:

 <script language='javascript' type='text/javascript'>
document.getElementById('sizeSelect').style.display = 'none';
</script>

SO, i did try this code in my PHP file with document ready function but still doesn't work from php file!

if ($sizeSelect = 1) {

echo "<script language='javascript' type='text/javascript'>";
echo
"$(document).ready(function(){ document.getElementById('sizeSelect').style.display = 'block';});";
echo "</script>";
}else{
echo "<script language='javascript' type='text/javascript'>";
echo "document.getElementById('sizeSelect').style.display = 'none';";
echo "</script>";
} 

any help would be great.

Try to put your php code that generating the javascript after your SELECT tag or at the end of file, because your javascript doesn't find the DOM element "#sizeSelect", i made test and it worked for me. like this:

<select id="sizeSelect" name="sizeSelect">
    <option>Small</option>
    <option>Large</option>
</select>

<?php 

    $sizeSelect = // retrieve sizeSelect value from your database;
    if ($sizeSelect != '1') {

        echo '<script type="text/javascript">';
        echo 'document.getElementById("sizeSelect").style.display = "block"';
        echo '</script>';
    }else{
        echo '<script type="text/javascript">';
        echo 'document.getElementById("sizeSelect").style.display = "none"';
        echo '</script>';
    }
?>

After you specified that you're using Smarty, i come back with a solution for that:

1. Concatenate your js content produced in php file on a string variable instead of using echo, and assign its value with Smarty assign() function

    $jsContent= '';
    if ($sizeSelect != '1') {
        $jsContent.= '<script type="text/javascript">';
        $jsContent.=  'document.getElementById("sizeSelect").style.display = "block"';
        $jsContent.=  '</script>';
    }
    else{
        $jsContent.=  '<script type="text/javascript">';
        $jsContent.=  'document.getElementById("sizeSelect").style.display = "none"';
        $jsContent.=  '</script>';
    }
    $smarty->assign('js', $jsContent);
   

2. Display the variable content as i said before, just after the select tag being targeted

    <select id="sizeSelect" name="sizeSelect">
        <option>Small</option>
        <option>Large</option>
    </select>
    {$js}
   

I think you should have a div in which select will work, use Div for hide and show, see below

Code for HTML:

<div id ="sizeSelect">
<select id="select_id" name="select_id">
            <option>Small</option>
            <option>Large</option>
            </select>

</div>

and for php

if ($sizeSelect) {
 echo '<script type="text/javascript">';
 echo 'document.getElementById("sizeSelect").style.display = "none"';
 echo '</script>';
}else{
 echo '<script type="text/javascript">';
 echo 'document.getElementById("sizeSelect").style.display = "block"';
 echo '</script>';
}

This worked for me:

if ($sizeSelect != 1) {
echo '<script language="javascript" type="text/javascript">';
echo
'$( document ).ready(function() { $( "#sizeSelect" ).hide();});';
echo "</script>";
}else{
echo "<script language='javascript' type='text/javascript'>";
echo
"$( document ).ready(function() { $( '#sizeSelect' ).show();});";
echo "</script>";

this is jQuery by the way.