根据菜单选择获取不同类型的 html 输出答案

【问题标题】：Getting different types of html output based on a menu selection根据菜单选择获取不同类型的 html 输出
【发布时间】：2017-09-07 00:28:31
【问题描述】：

我正在尝试基于菜单选择获取文本框或另一个下拉菜单。我已经能够通过javascript函数做到这一点。现在我从这个网站得到了一些帮助：

how can select from drop down menu and call javascript function

但这只是我实现目标的一部分。例如，试图根据在菜单选项中选择“每日”来显示一些 html 功能，但可惜这不起作用。下面是我的代码，请你帮我调整一下这段代码，这样我就可以在下拉菜单中选择每天时显示嵌入在 javascript 中的 html 代码。

<!DOCTYPE html>
<html>
<body>

<select name="aa" onchange="report(this.value)"> 
 <option value="">Please select</option>
  <option value="daily">daily</option>
  <option value="monthly">monthly</option>
   </select>
<script>
function report(v) {
//To Do
    switch(v) {
        case "daily":
            notification_var = "<hr>";
            notification_var += "<table width=100% border=0>";
            notification_var += "<tr>";
            notification_var += "<td align=left  width=30% style='align:left;padding-left:0px;height:30px;'><span id='toplink_daily_remarks'></span></td>";
            notification_var += "<td align=center><label style='font-family:arial;font-weight:bold;font-size:1.2em;color:#000080;'>Daily Info and    Remarks</label></td>";
            notification_var += "<td width=30%>&nbsp;</td>";
            notification_var += "</tr>";
            notification_var += "</table>";
            return notification_var;
        break;
    case "monthly":
        //Do somthing
        break;
    }
}
</script>

</body>
</html>

【问题讨论】：

标签： javascript html menu

【解决方案1】：

您需要定义要注入标记的位置。请参阅我的工作示例，了解如何执行此操作。

var reportWrapper = document.getElementById('reportWrapper');
  
function report(v) {
  switch (v) {
    case "daily":
			daily();
      break;
    case "monthly":
      monthly();
      break;
  }
}

function daily() {  
  var notification_var = "<hr>";
  notification_var += "<table width=100% border=0>";
  notification_var += "<tr>";
  notification_var += "<td align=left  width=30% style='align:left;padding-left:0px;height:30px;'><span id='toplink_daily_remarks'></span></td>";
  notification_var += "<td align=center><label style='font-family:arial;font-weight:bold;font-size:1.2em;color:#000080;'>Daily Info and    Remarks</label></td>";
  notification_var += "<td width=30%>&nbsp;</td>";
  notification_var += "</tr>";
  notification_var += "</table>";
  
  reportWrapper.innerHTML = notification_var;
}

function monthly () {
  reportWrapper.innerHTML = '';
}

<select name="aa" onchange="report(this.value)">
  <option value="">Please select</option>
  <option value="daily">daily</option>
  <option value="monthly">monthly</option>
</select>

<div id="reportWrapper"></div>

【讨论】：

我尝试运行上面的代码，会得到以下错误：未捕获的类型错误：无法设置属性“innerHTML”为空。我该如何解决这个问题？”
@jms1980 您是否更新了 html 以包含 <div id="reportWrapper"></div>？你的 js var reportWrapper = document.getElementById('reportWrapper'); 顶部有这行吗？

【解决方案2】：

如果我正确理解您的问题，您会问“如何在选择特定值时在页面上插入我的 HTML 代码”。我将您的代码调整了三行，它似乎可以正常工作。这是你所期待的吗？

<!DOCTYPE html>
<html>
<body>

<select name="aa" onchange="report(this.value)"> 
 <option value="">Please select</option>
  <option value="daily">daily</option>
  <option value="monthly">monthly</option>
   </select>
<script>
function report(v) {
//To Do
    switch(v) {
        case "daily":
            var notification_var = "<hr>";
            notification_var += "<table width=100% border=0>";
            notification_var += "<tr>";
            notification_var += "<td align=left  width=30% style='align:left;padding-left:0px;height:30px;'><span id='toplink_daily_remarks'></span></td>";
            notification_var += "<td align=center><label style='font-family:arial;font-weight:bold;font-size:1.2em;color:#000080;'>Daily Info and    Remarks</label></td>";
            notification_var += "<td width=30%>&nbsp;</td>";
            notification_var += "</tr>";
            notification_var += "</table>";
            document.open();
            document.write(notification_var);
            document.close();
            return notification_var;
        break;
    case "monthly":
        //Do somthing
        break;
    }
}
</script>

</body>
</html>

【讨论】：