Question

这是我的代码：

<!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>

$classCode变量（字符串）=

的值

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

第一个多选选择框（名为numbers[]）可以使用Javascript。您可以单击框中的多个项目而无需按住CTRL，但第二个选择框（几乎与第一个相同）不会。我假设因为我让程序将自己的代码写入PHP变量，然后当我尝试将PHP变量嵌入到HTML代码中时会发生一些事情。

有谁知道为什么＆amp;如何修复它所以第二个选择框将与第一个相同？您无法在第二个选择框中按住CTRL来单击多个项目，因此它就像javascript函数甚至没有注册第二个选择框。

更新1：为了向大家证明这不是回声搞乱的事情，我把所有内容从一个echo语句中取出来，它现在只回显PHP变量。还是搞砸了。第一个选择框有效，另一个有PHP变量没有。

请原谅格式问题。前3个代码块是1。

Answer 1

中断echo语句，而不是将所有选择框选项存储在数组中，通过在while循环中迭代结果，从数据库中提取它们时进行渲染。那么＆＃34;和\＆＃34;问题不会出现。你也可以使用＆＃39;引用而不是＆＃34;在echo语句中。这是我假设的情况可能是..

        <?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>\n";
        }

       echo " 
        </select>
        <input type=\"submit\" name=\"submit\" value=\"Proceed to Next Step\" />
        </form>
        </body></html>";?>

Answer 2

从提供的代码判断，绝对没有必要在回声中包含所有内容。唯一需要回应的东西（据我所见）只是$classCode。示例如下。

<!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>

Answer 3

在begin函数中，通过将每个函数的ID属性传递给addSelect函数，将处理程序附加到选择。您没有为新选择执行此操作。你只需要这样做：

addSelect('classes');

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

3 个答案: