使用 php 和 javascript 表单选择对象动态更改类名？

Question

在这里遇到一些麻烦。

设置：

select 对象可以选择“其他”

用户选择“其他”。

选择此特定值时运行脚本，并动态地将 input 对象的 class 从“隐藏”更改为“显示”（通过 css display< 隐藏和可见） /代码>）。

<p>Select a Grade:</p>
    <select name="grade" id="grade" onchange="changeCssClass('otherGrade')">
    <option value="No Specified Grade">Please Select</option>
    <option value="201">201</option>
        ...
    <option value="Secondary">Secondary</option>
    <option value="otherGrade">Other</option>
    </select>

<p>If "Other":</p>
<?php
    $otherGrade = $_POST['grade'];

    if($otherGrade = "otherGrade")
    {
    echo("<script language='javascript' type='text/javascript'>

        function changeCssClass(objInputID)
        {               

                    if(document.getElementById(objInputID).className=='hide')
            {
                        document.getElementById(objInputID).className = 'show';
            }
            else
            {
                document.getElementById(objInputID).className = 'hide';
            }
        }

        </script>");
    }
    else
    {
        echo ("");
    }
?>

<input type="text" name="otherGrade" id="otherGrade" class="hide" />

我应该从 select 对象中删除 onchange 事件吗？如果是这样，我不知道如何执行脚本。

任何解决方案将不胜感激。

Answer 1

该脚本应始终包含在您的页面中，因为您希望在下拉列表中进行更改时运行该脚本。

<script language='javascript' type='text/javascript'>
    function changeCssClass(objInputID, currentVal, correctVal)
    {         
       if(correctVal == currentVal)
        {
                    document.getElementById(objInputID).className = 'show';
        }
        else
        {
            document.getElementById(objInputID).className = 'hide';
        }
    }
</script>

<p>Select a Grade:</p>
<select name="grade" id="grade" onchange="changeCssClass('otherGrade', this.value, 'otherGrade')">
<option value="No Specified Grade">Please Select</option>
<option value="201">201</option>
    ...
<option value="Secondary">Secondary</option>
<option value="otherGrade">Other</option>
</select>

<p>If "Other":</p>

<input type="text" name="otherGrade" id="otherGrade" class="hide" />

实时示例位于：http://www.jsfiddle.net/MVymF/

Answer 2

你为什么把这个放在后期活动中？您可以将其呈现为标准 javascript 作为页面的一部分。

Answer 3

发布时，页面将刷新，重新加载时，您不会保存选择框的选定值。

发布后选择框不会保持选中状态。你必须这样做。

>其他

随着选项值的改变，显示隐藏也消失了。
请修复该问题

如果不需要提交页面， 。使用这个

http://api.jquery.com/val/

检查 select 的演示