堆栈内存溢出
  繁体   English   中英

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

[英]javascript works on jsFiddle, but not on live server

 原文  2015-06-24 19:02:25  9   2    javascript/ html/ jsfiddle

问题描述

我正在尝试将 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>

我错过了什么？ 我确信这是非常简单的事情，但我只是没有看到它。

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

2 个解决方案

解决方案1
 6  2015-06-24 19:04:10

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

解决方案2
 3  2015-06-24 19:05:20

用<script>标签替换<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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 可在jsFiddle中使用，但不能在现场使用 使用JavaScript显示隐藏的div-可在JSFiddle中使用，但不能在实时站点上使用 jQuery addClass可在jsfiddle上运行，但无法实时运行 JQuery可在JSFiddle中使用，但不能在Live网站中使用 jQuery可在jsFiddle上使用，但不能在实时页面上使用 滑块切换可在jsfiddle中使用，但不能实时使用 Javascript 适用于 jsfiddle 但不适用于移动设备 Javascript适用于jsfiddle，但不适用于localhost Javascript可在本地服务器上运行，但不能在实时服务器上运行 Fancybox开头问题-在JSFiddle上有效，但不适用于实时环境
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM