Question

我想知道是否有人可以指导我解决这个问题。我的代码将值从Google电子表格单元格的四个选项中加载到HTML输入表单字段中，该字段到目前为止一直有效。代码的另一部分应显示与电子表格的输入字段中加载的值相对应的div。仅当我在输入字段行中对value="my value"进行硬编码时，这部分代码才有效。如果输入字段由脚本填充，则div将不会相应地加载。我在这里看到了几个类似的问题，并尝试了他们的解决方案，但均未成功。

.ribbon {
  background-color: #a00;
  overflow: hidden;
  white-space: nowrap;
  /* top left corner */
  position: absolute;
  right: -50px;
  top: 40px;
  /* for 45 deg rotation */
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  /* for creating shadow */
  -webkit-box-shadow: 0 0 10px #888;
  -moz-box-shadow: 0 0 10px #888;
  box-shadow: 0 0 10px #888;
}

.ribbon a {
  border: 1px solid #faa;
  color: #fff;
  display: block;
  font: bold 100% 'Helvetica Neue', Helvetica, Arial, sans-serif;
  margin: 1px 0;
  padding: 10px 50px;
  text-align: center;
  text-decoration: none;
  /* for creating shadow */
  text-shadow: 0 0 5px #444;
}

.ribbonFINALIZADO {
  background-color: #006600;
  overflow: hidden;
  white-space: nowrap;
  /* top left corner */
  position: absolute;
  right: -50px;
  top: 40px;
  /* for 45 deg rotation */
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  /* for creating shadow */
  -webkit-box-shadow: 0 0 10px #888;
  -moz-box-shadow: 0 0 10px #888;
  box-shadow: 0 0 10px #888;
}

.ribbonFINALIZADO a {
  border: 1px solid #ccffcc;
  color: #fff;
  display: block;
  font: bold 100% 'Helvetica Neue', Helvetica, Arial, sans-serif;
  margin: 1px 0;
  padding: 10px 50px;
  text-align: center;
  text-decoration: none;
  /* for creating shadow */
  text-shadow: 0 0 5px #444;
}

.ribbonNODETRAN {
  background-color: #0000ff;
  overflow: hidden;
  white-space: nowrap;
  /* top left corner */
  position: absolute;
  right: -50px;
  top: 40px;
  /* for 45 deg rotation */
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  /* for creating shadow */
  -webkit-box-shadow: 0 0 10px #888;
  -moz-box-shadow: 0 0 10px #888;
  box-shadow: 0 0 10px #888;
}

.ribbonNODETRAN a {
  border: 1px solid #e6e6ff;
  color: #fff;
  display: block;
  font: bold 100% 'Helvetica Neue', Helvetica, Arial, sans-serif;
  margin: 1px 0;
  padding: 10px 50px;
  text-align: center;
  text-decoration: none;
  /* for creating shadow */
  text-shadow: 0 0 5px #444;
}

.ribbonCANCELADO {
  background-color: #ff6699;
  overflow: hidden;
  white-space: nowrap;
  /* top left corner */
  position: absolute;
  right: -50px;
  top: 40px;
  /* for 45 deg rotation */
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  /* for creating shadow */
  -webkit-box-shadow: 0 0 10px #888;
  -moz-box-shadow: 0 0 10px #888;
  box-shadow: 0 0 10px #888;
}

.ribbonCANCELADO a {
  border: 1px solid #ffccdd;
  color: #fff;
  display: block;
  font: bold 100% 'Helvetica Neue', Helvetica, Arial, sans-serif;
  margin: 1px 0;
  padding: 10px 50px;
  text-align: center;
  text-decoration: none;
  /* for creating shadow */
  text-shadow: 0 0 5px #444;
}

.box {
  color: #fff;
  padding: 20px;
  display: none;
  margin-top: 0px;
}

.ribbon {
  background: #ff0000;
}

.ribbonFINALIZADO {
  background: #228B22;
}

.ribbonNODETRAN {
  background: #0000ff;
}

.ribbonCANCELADO {
  background: #ff6699;
}

<head>
  <base target="_top">
  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $("select").change(function() {
        $(this).find("option:selected").each(function() {
          var optionValue = $(this).attr("value");
          if (optionValue) {
            $(".box").not("." + optionValue).hide();
            $("." + optionValue).show();
          } else {
            $(".box").hide();
          }
        });
      }).change();
    });
  </script>
</head>

<body>

  <br>
  <form>
    status:<br>
    <input type="text" name="status" id="status" value="NAO SUBMETIDO">

  </form>

  <script>
    $(document).ready(function() {
      var val = $("#status").val();

      if (val == 'NAO SUBMETIDO') {
        $("#NAOSUBMETIDO").css("display", "block");
      }

      if (val == 'NO DETRAN') {
        $("#NODETRAN").css("display", "block");
      }

      if (val == 'FINALIZADO') {
        $("#FINALIZADO").css("display", "block");
      }

      if (val == 'CANCELADO') {
        $("#CANCELADO").css("display", "block");
      }

    });
  </script>

  <div id="NAOSUBMETIDO" class="ribbon box"> <a href="#">NAO SUBMETIDO!</a></div>
  <div id="NODETRAN" class="ribbonNODETRAN box"> <a href="#">NO DETRAN</a></div>
  <div id="FINALIZADO" class="ribbonFINALIZADO box"> <a>FINALIZADO</a> </div>
  <div id="CANCELADO" class="ribbonCANCELADO box"> <a href="#">CANCELADO</a></div>


  <script>
    window.addEventListener('load', populate());

    function populate() {
      google.script.run.withSuccessHandler(displayValue).fetchValue();
    }

    function displayValue(data) {
      document.getElementById("status").value = data[0][0];
    }
  </script>

</body>

显示/隐藏div取决于从Google电子表格加载到输入字段的值

0 个答案: