Question

我正在尝试将Word Doc表单转换为在线表单，以便我们可以保证结果并方便用户。当我在jsfiddle上测试javascript时它工作得很完美，但是当我将它上传到我们的服务器并访问它时，它不起作用。

这是jsfiddle：http://jsfiddle.net/b4avkn9q/8/

这是页面背后的代码：

<!doctype html>
<html>
    <head>
        <title>BUILDER Building Add Request (DHA)</title>

        <!-- JavaScript -->
        <style>
        function Org1Pick() {
            var Org1 = document.getElementById("OrgDHA").value;
            document.getElementById("OrgDHA2").style.visibility = "visible";
            document.getElementById("OrgChoice").innerHTML = Org1+" selected";
            switch (Org1) {
                case "AFMS":
                    alert(Org1);
                    document.getElementById("OrgDHA2").list = "ORG-DHA-AFMS";
                    document.getElementById("OrgDHA2").placeholder = "DHA-AFMS";
                    break;
                case "BUMED":
                    alert(Org1);
                    document.getElementById("OrgDHA2").list = "ORG-DHA-BUMED";
                    document.getElementById("OrgDHA2").placeholder = "DHA-BUMED";
                    break;
                case "MEDCOM":
                    alert(Org1);
                    document.getElementById("OrgDHA2").list = "ORG-DHA-MEDCOM";
                    document.getElementById("OrgDHA2").placeholder = "DHA-MEDCOM";
                    break;
                case "NCR":
                    alert(Org1);
                    document.getElementById("OrgDHA2").list = "ORG-DHA-NCR";
                    document.getElementById("OrgDHA2").placeholder = "DHA-NCR";
                    break;
                default:
                    alert(Org1);
                    document.getElementById("OrgDHA2").style.visibility = "hidden";
                    document.getElementById("OrgAFMS").style.visibility = "hidden";
                    document.getElementById("OrgBUMED").style.visibility = "hidden";
                    document.getElementById("OrgMEDCOM").style.visibility = "hidden";
                    document.getElementById("OrgNCR").style.visibility = "hidden";
            }
        }
        </style>

        <!-- CSS -->
        <style>
            .form_desc {
                text-align: right;
                vertical-align: top;
            }
            .form_input {
                text-align: left;
                vertical-align: top;
                font-style: italic;
            }
        </style>
    </head>

    <body>
        <div>
            <input type="text" list="ORG-DHA" id="OrgDHA" placeholder="Select an Organization" onchange="Org1Pick()" />
            <input type="text" list="ORG-DHA" id="OrgDHA2" placeholder="" onchange="Org2Pick()" style="visibility:hidden" />
            <div id="OrgChoice" >No Organization(s) seleceted.</div>
        </div>

        <!-- ORG datalists -->
        <datalist id="ORG-DHA">
            <option value="AFMS">
            <option value="BUMED">
            <option value="MEDCOM">
            <option value="NCR">
        </datalist>
        <datalist id="ORG-DHA-AFMS">
            <option value="ACC">
            <option value="AETC">
            <option value="AFDW">
            <option value="AFGSC">
            <option value="AFMC">
            <option value="AFSOC">
            <option value="AFSPC">
            <option value="AMC">
            <option value="PACAF">
            <option value="USAFE">
        </datalist>
        <datalist id="ORG-DHA-BUMED">
            <option value="DET JAX">
            <option value="NME">
            <option value="NMW">
        </datalist>
        <datalist id="ORG-DHA-MEDCOM">
            <option value="ERMC">
            <option value="MRMC">
            <option value="NRMC">
            <option value="PRMC">
            <option value="SRMC">
            <option value="USAPHC">
            <option value="WRMC">
        </datalist>
        <datalist id="ORG-DHA-NCR">
            <option value="UHUHS">
            <option value="WRNMMC Bethesda">
        </datalist>

    </body>
</html>

我错过了什么？我相信这很简单，但我只是没有看到它。

更新：“不工作”我的意思是，一旦我从下拉菜单中选择了该选项，就什么也没发生。

Answer 1

您已将脚本放在<style>元素而非<script>元素中。

Answer 2

将<style>标记替换为<script>标记：

<scipt type="text/javascript">
        function Org1Pick() {
            var Org1 = document.getElementById("OrgDHA").value;
            document.getElementById("OrgDHA2").style.visibility = "visible";
            document.getElementById("OrgChoice").innerHTML = Org1+" selected";
            switch (Org1) {
                case "AFMS":
                    alert(Org1);
                    document.getElementById("OrgDHA2").list = "ORG-DHA-AFMS";
                    document.getElementById("OrgDHA2").placeholder = "DHA-AFMS";
                    break;
                case "BUMED":
                    alert(Org1);
                    document.getElementById("OrgDHA2").list = "ORG-DHA-BUMED";
                    document.getElementById("OrgDHA2").placeholder = "DHA-BUMED";
                    break;
                case "MEDCOM":
                    alert(Org1);
                    document.getElementById("OrgDHA2").list = "ORG-DHA-MEDCOM";
                    document.getElementById("OrgDHA2").placeholder = "DHA-MEDCOM";
                    break;
                case "NCR":
                    alert(Org1);
                    document.getElementById("OrgDHA2").list = "ORG-DHA-NCR";
                    document.getElementById("OrgDHA2").placeholder = "DHA-NCR";
                    break;
                default:
                    alert(Org1);
                    document.getElementById("OrgDHA2").style.visibility = "hidden";
                    document.getElementById("OrgAFMS").style.visibility = "hidden";
                    document.getElementById("OrgBUMED").style.visibility = "hidden";
                    document.getElementById("OrgMEDCOM").style.visibility = "hidden";
                    document.getElementById("OrgNCR").style.visibility = "hidden";
            }
        }
</script>

javascript适用于jsFiddle，但不适用于实时服务器

2 个答案: