将PHP变量嵌入HTML代码时,Javascript代码不起作用

Here's my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Planner</title>

<meta name="keywords" content="" />
<meta name="description" content="" />

<script type="text/javascript">

    // Variables we need
    var previous    = new Array();
    var lastClicked = '';

    // We are going to attach event listeners, no code at the bottom or anything hard coded...
    function addEvent(obj, evType, fn)
    { 
        if(obj.addEventListener)
        {
            obj.addEventListener(evType, fn, false);
            return true;
        }
        else if(obj.attachEvent)
        {
            var r = obj.attachEvent('on' + evType, fn);
            return r;
        }
        else
        {
            return false; 
        } 
    }

    // Let's begin when the DOM is ready
    addEvent(window, 'load', begin);

    // Attach the handlers to our selects
    function begin()
    {
        addSelect('numbers');
        addSelect('sm');
        addSelect('sm2');
    }

    // We add a couple of handlers to each
    function addSelect(id)
    {
        var sel = document.getElementById(id);
        addEvent(sel, 'click', whichElement);
        addEvent(sel, 'click', addRemoveClicked);
    }

    // Find which element we are looking at on this click
    function whichElement(e)
    {
        if(!e)
        {
            var e = window.event;
        }

        if(e.target)
        {
            lastClicked = e.target;
        }
        else if(e.srcElement)
        {
            lastClicked = e.srcElement;
        }

        if(lastClicked.nodeType == 3) // Safari bug
        {
            lastClicked = lastClicked.parentNode;
        }
    }

    // Make sure we are displaying the correct items
    function addRemoveClicked(e)
    {
        if(!previous[this.id])
        {
            previous[this.id] = new Array();
        }

        // Remember what has been used
        if(previous[this.id][lastClicked.value] == 1)
        {
            previous[this.id][lastClicked.value] = 0;
        }
        else
        {
            previous[this.id][lastClicked.value] = 1;
        }

        var selectBox = document.getElementById(this.id);

        // Add correct highlighting
        for(var i = 0; i < selectBox.options.length; i++)
        {
            selectBox.options[i].selected = '';

            if(previous[this.id][selectBox.options[i].value] == 1)
            {
                selectBox.options[i].selected = 'selected';
            }
        }
    }
</script>

    <select name="numbers[]" id="numbers" multiple="multiple" size="6"> 
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
        <option value="4">Four</option>
        <option value="5">Five</option>
    </select>

    <select name="classes[]" id="classes" multiple="multiple" size="10"> 
    <?PHP echo $classCode ?>
    </select>
    <input type="submit" name="submit" value="Proceed to Next Step" />
    </form>
    </body></html>

The value of the $classCode variable (string) =

<option value="1">201 Intro to Financial Accounting</option> 

<option value="2">202 Intro to Managerial Accounting</option> 

<option value="3">130 Intro to Microeconomics</option> 

<option value="4">320 Principles Bus Finance</option> 

<option value="5">300 Management, &amp; Human Behavior</option>

The first multiple select select box (named numbers[]) works with Javascript as it should. You're able to click multiple items in the box without having to hold CTRL but the second select box, almost identical to the first, doesn't. I assume because I'm having the program write its own code into a PHP variable, then something happens when I try to embed that PHP variable into the HTML code.

Does anyone know why & how to fix it so the second select box will work the same as the first? You can't click multiple items without having to hold CTRL in the second select box so it's like the javascript functions aren't even registering for the second select box.

Update 1: To prove to everyone that it isn't the echo messing things up, I took everything out of an echo statement and it is now only echoing the PHP variable. Still messes up. First select box works, other one that has the PHP variable doesn't.

Excuse the formatting issue. The first 3 chunks of code are meant to be 1.

douyan2970
douyan2970 看着它。没关系。Java可以工作,但仅适用于我自己编写代码的第一个多选框,而不是第二个框,其中部分代码由PHP变量编写。
接近 5 年之前 回复
doujiao1984
doujiao1984 您只需要使用PHP作为PHP的位。至于你的问题,请看一下begin函数。
接近 5 年之前 回复
drjtua5953
drjtua5953 因为脚本的其余部分是PHP。内容也需要来自服务器端的一些输入-因此我使用了PHP。还有更好的选择吗?
接近 5 年之前 回复
douxing8323
douxing8323 你为什么用PHP打印出你的整个内容?!
接近 5 年之前 回复

3个回答

Break your echo statement and instead of storing all select box options in an array, render them as they are fetched from the database by iterating thru the result in a while loop. Then the " and \" problem would not arise. Also you can use ' quotes instead of " within the echo statement. Here is what I have assumed the situation may be..

        <?PHP
    echo "
    <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
    <html xmlns=\"http://www.w3.org/1999/xhtml\">
    <head>

    <title>Planner</title>

    <meta name=\"keywords\" content=\"\" />
    <meta name=\"description\" content=\"\" />

    <script type=\"text/javascript\">

        // Variables we need
        var previous    = new Array();
        var lastClicked = '';

        // We are going to attach event listeners, no code at the bottom or anything hard coded...
        function addEvent(obj, evType, fn)
        { 
            if(obj.addEventListener)
            {
                obj.addEventListener(evType, fn, false);
                return true;
            }
            else if(obj.attachEvent)
            {
                var r = obj.attachEvent('on' + evType, fn);
                return r;
            }
            else
            {
                return false; 
            } 
        }

        // Let's begin when the DOM is ready
        addEvent(window, 'load', begin);

        // Attach the handlers to our selects
        function begin()
        {
            addSelect('numbers');
            addSelect('sm');
            addSelect('sm2');
        }

        // We add a couple of handlers to each
        function addSelect(id)
        {
            var sel = document.getElementById(id);
            addEvent(sel, 'click', whichElement);
            addEvent(sel, 'click', addRemoveClicked);
        }

        // Find which element we are looking at on this click
        function whichElement(e)
        {
            if(!e)
            {
                var e = window.event;
            }

            if(e.target)
            {
                lastClicked = e.target;
            }
            else if(e.srcElement)
            {
                lastClicked = e.srcElement;
            }

            if(lastClicked.nodeType == 3) // Safari bug
            {
                lastClicked = lastClicked.parentNode;
            }
        }

        // Make sure we are displaying the correct items
        function addRemoveClicked(e)
        {
            if(!previous[this.id])
            {
                previous[this.id] = new Array();
            }

            // Remember what has been used
            if(previous[this.id][lastClicked.value] == 1)
            {
                previous[this.id][lastClicked.value] = 0;
            }
            else
            {
                previous[this.id][lastClicked.value] = 1;
            }

            var selectBox = document.getElementById(this.id);

            // Add correct highlighting
            for(var i = 0; i < selectBox.options.length; i++)
            {
                selectBox.options[i].selected = '';

                if(previous[this.id][selectBox.options[i].value] == 1)
                {
                    selectBox.options[i].selected = 'selected';
                }
            }
        }
    </script>
    </head>

    <body>
    <form name=\"takenClasses\" method=\"post\" action=\"process.php\">

        <select name=\"numbers[]\" id=\"numbers\" multiple=\"multiple\" size=\"6\"> 
            <option value=\"1\">One</option>
            <option value=\"2\">Two</option>
            <option value=\"3\">Three</option>
            <option value=\"4\">Four</option>
            <option value=\"5\">Five</option>
        </select>

        <select name=\"classes[]\" id=\"classes\" multiple=\"multiple\" size=\"20\"> 
        ";
        while($row=mysql_fetch_array($result)) {
            echo "<option value='$row[id]'>$row[course_name] </option>
";
        }

       echo " 
        </select>
        <input type=\"submit\" name=\"submit\" value=\"Proceed to Next Step\" />
        </form>
        </body></html>";?>
dongzhuji1042
dongzhuji1042 再说一次,为了改善代码,不要打破回声。 我也已经尝试过与此类似的东西,它不会起作用。 另外,我的变量不是数组 - 它是一个字符串。
接近 5 年之前 回复

Judging from the code provided, there is absolutely no need to have everything inside an echo. The only thing that needs to be echoed (as far as I can see) is just the $classCode. Example below.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>Planner</title>

<meta name="keywords" content="" />
<meta name="description" content="" />

<script type="text/javascript">

    // Variables we need
    var previous    = new Array();
    var lastClicked = '';

    // We are going to attach event listeners, no code at the bottom or anything hard coded...
    function addEvent(obj, evType, fn)
    { 
        if(obj.addEventListener)
        {
            obj.addEventListener(evType, fn, false);
            return true;
        }
        else if(obj.attachEvent)
        {
            var r = obj.attachEvent('on' + evType, fn);
            return r;
        }
        else
        {
            return false; 
        } 
    }

    // Let's begin when the DOM is ready
    addEvent(window, 'load', begin);

    // Attach the handlers to our selects
    function begin()
    {
        addSelect('numbers');
        addSelect('sm');
        addSelect('sm2');
    }

    // We add a couple of handlers to each
    function addSelect(id)
    {
        var sel = document.getElementById(id);
        addEvent(sel, 'click', whichElement);
        addEvent(sel, 'click', addRemoveClicked);
    }

    // Find which element we are looking at on this click
    function whichElement(e)
    {
        if(!e)
        {
            var e = window.event;
        }

        if(e.target)
        {
            lastClicked = e.target;
        }
        else if(e.srcElement)
        {
            lastClicked = e.srcElement;
        }

        if(lastClicked.nodeType == 3) // Safari bug
        {
            lastClicked = lastClicked.parentNode;
        }
    }

    // Make sure we are displaying the correct items
    function addRemoveClicked(e)
    {
        if(!previous[this.id])
        {
            previous[this.id] = new Array();
        }

        // Remember what has been used
        if(previous[this.id][lastClicked.value] == 1)
        {
            previous[this.id][lastClicked.value] = 0;
        }
        else
        {
            previous[this.id][lastClicked.value] = 1;
        }

        var selectBox = document.getElementById(this.id);

        // Add correct highlighting
        for(var i = 0; i < selectBox.options.length; i++)
        {
            selectBox.options[i].selected = '';

            if(previous[this.id][selectBox.options[i].value] == 1)
            {
                selectBox.options[i].selected = 'selected';
            }
        }
    }
</script>
</head>

<body>
<form name="takenClasses" method="post" action="process.php">

    <select name="numbers[]" id="numbers" multiple="multiple" size="6"> 
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
        <option value="4">Four</option>
        <option value="5">Five</option>
    </select>

    <select name="classes[]" id="classes" multiple="multiple" size="20"> 
    <?php echo $classCode; ?>
    </select>
    <input type="submit" name="submit" value="Proceed to Next Step" />
    </form>
    </body></html>
dongyuanliao6204
dongyuanliao6204 我更新了OP。 从echo中获取代码,现在它位于脚本的底部,并且只有PHP应该存在。 同样的问题。 第一个具有“一个”“两个”的多选框等工作,我不需要按住CTRL,但不需要按住PHP变量的第二个。
接近 5 年之前 回复
duan198123
duan198123 就像我说的那样,根据你提供的代码判断。 如果这是在其他脚本文件中,那么添加代码,这样我们就可以更好地掌握这里发生的事情,因为将上面添加的代码中的所有内容推送到上面添加的代码并不是最好的事情。 很容易打破你。
接近 5 年之前 回复
du7535
du7535 这是在PHP脚本的中间。 换句话说,我不打算破解PHP脚本,因此当它可以毫不费力地进入时,它不在echo语句中。我也已经尝试了这个并且我得到的结果和我现在一样 - 我需要按住CTRL以便能够单击多个项目的多个选择框。 这不是我原来问题的答案,而只是对代码改进的建议
接近 5 年之前 回复



begin </ code>函数中,将处理程序附加到选择,方法是将每个处理程序的ID属性传递给 addSelect </ code>函数。 您没有为新选择执行此操作。 您只需要这样做:</ p>

addSelect('classes'); </ code> </ p>
</ div>

展开原文

原文

In the begin function, you attach the handler to the selects by passing the ID attribute of each to the addSelect function. You are not doing this for your new select. You simply need to do so:

addSelect('classes');

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问