duan1226
2014-05-24 11:17
采纳率: 100%
浏览 35

在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.

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • dtp19819 2014-05-24 11:24
    已采纳

    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}
      
    已采纳该答案
    打赏 评论
  • douju9272 2014-05-24 11:23

    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>';
    }
    
    打赏 评论
  • douqi0090 2014-05-24 12:24

    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.

    打赏 评论

相关推荐 更多相似问题